內容展示詞條 2-35

程式碼區塊Code Block

也常叫做：程式碼片段、Snippet

你可能會這樣說

教學文章裡放一段程式碼，深色底、依語法上色，右上角有「複製」按鈕一鍵拷走——看起來很專業的那塊。

程式碼區塊是用等寬字體、深色底呈現程式碼的區塊，不同語法配不同顏色，讀起來省力許多。

就算你不寫程式也可能用到：跟 AI 協作時它常給你程式碼，你的教學頁也可能要放程式碼讓別人複製。

實用的小配備是右上角的「複製」按鈕和語言標示，跟 AI 說一聲就會有。

h1 { font-size: 48px; color: #2f4d6b; }

這行程式碼在說：把大標 h1 放大到 48px、塗上深藍色。點各段看細節。

圖 2-39　程式碼區塊＝等寬字體＋語法上色＋一鍵複製。

中文就可以

教學頁要能放程式碼區塊。
深色底、等寬字體，依語言標上不同顏色。
右上角放複製按鈕，按下後變成「已複製」兩秒。
超出寬度時出現橫向捲動，不要自動換行。