基本概念:<pre> 與 <code> 的差異與用途
首先,我們來認識 <pre> 和 <code> 這兩個元素的角色:
<pre>(preformatted text):顧名思義是「預先格式化文本」。被包裹在 <pre> 中的文字會保留原始排版呈現,包括空白、縮排和換行都會完整呈現。瀏覽器在呈現 <pre> 內容時通常會使用固定寬度的等寬字體,確保對齊和格式一致。另外,<pre> 元素預設是區塊級元素,也就是獨立一行佔據一個區塊。這意味著它會在前後自動換行,不會與旁邊的文字擠在同一行。
<code>(code text):<code> 用於標記一小段程式碼或程式語言片段,強調「這部分內容是程式碼」。瀏覽器同樣以等寬字體來顯示 <code> 內的文字。與 <pre> 不同的是,<code> 預設屬於行內元素(inline element),可以直接出現在段落文字中,而不會強制換行。例如你可以在一段文字中寫 sum() 來呈現函式名稱。由於 <code> 是行內元素,它本身不會保留換行和多重空白等格式——主要作用在於語義上的標記以及字體樣式的改變。
簡單來說,<pre> 強調格式呈現,會按照原始輸入顯示空白和換行,而 <code> 強調語義,表示其中是程式碼片段並切換為等寬字體。這兩者經常搭配使用:在需要呈現多行程式碼區塊時,常見做法是將程式碼內容放在 <pre> 裡,並再用一對 <code> 元素包起來。這種組合能同時達到預先格式化和語意標記的效果。例如:
<pre><code>
// 這是一段多行的範例程式碼
function greet(name) {
console.log("Hello, " + name + "!");
}
</code></pre>
上例中,<pre> 負責保留程式碼的換行與縮排格式,而 <code> 則表明其中的文字是程式碼(例如讓輔助工具讀出時有所區別)。提醒:<pre> 中的內容會完整按照原始輸入顯示,包括換行,因此記得在編輯程式碼時保持適當的縮排,否則網頁上也會照樣呈現零散的排版。
常見錯誤:僅使用 <code> 而不搭配 <pre> 就直接放入多行程式碼。由於 <code> 本身不會保留換行,這麼做會導致多行程式碼被串成同一行,失去原本的格式可讀性。例如:
<p><code>Line1
Line2</code></p>
實際顯示時只會成為「Line1 Line2」在同一行(中間只留一個空格)。正確的作法是對多行內容使用 <pre> 包裹,必要時再內嵌 <code> 提供語意標記。
HTML 語法實例:將程式碼嵌入網頁
了解了上述概念後,讓我們看看在 HTML 中如何實際使用 <pre> 和 <code>。一般來說,你會遇到兩種情境:行內程式碼片段和區塊程式碼段落。
行內程式碼片段
當程式碼僅是段落文字的一部分時,可使用 <code> 標籤直接包住程式碼。例如:
<p>請使用 <code>document.querySelector()</code> 方法來選取 DOM 元素。</p>
在這段 HTML 中,<code> 將 document.querySelector() 包起來,使瀏覽器以等寬字體呈現它,讀者也能清楚辨識這是程式碼。整個句子仍然是一個段落 (<p>),程式碼部分不會強制換行,但以視覺上凸顯出來。
區塊程式碼段落
當需要展示多行程式碼時,應使用 <pre> 來包含這段程式碼文字,並通常在其中再加入 <code>。例如:
<pre><code class="language-js">
// 一個簡單的 JavaScript 函式範例
function greet(name) {
console.log("Hello, " + name + "!");
}
</code></pre>
這段標記會在網頁上呈現一個獨立的程式碼區塊。多行內容在 <pre> 裡會保持原樣的縮排和換行,因此 function greet(name) { ... } 的格式將完好呈現。而我們額外給 <code> 一個 class="language-js",是為了後續如果要結合語法高亮函式庫(如 Prism.js 或 highlight.js)時,可以透過該 class 辨識語言。即使不使用高亮庫,加上適當的類別名稱也方便我們用 CSS 定義特殊樣式。
提醒:當你希望在 <pre>(或 <code>)中顯示像 <、>、&、" 等HTML 保留字元時,務必要轉義(escape)它們為 HTML 實體。例如想在程式碼區塊中展示 <div> 標籤,原始 HTML 檔中需要寫成 <div>,否則瀏覽器會把它當真正的 HTML 標籤解析而非顯示文字。這是初學者很容易犯的錯誤,在此特別提醒。
現在,我們已經能在網頁上正確地嵌入程式碼了。然而僅有正確的語法還不夠,原始的 <pre><code> 區塊外觀往往比較樸素。下一節我們將探討如何透過 CSS 排版與美化,讓程式碼區塊更醒目易讀。
結合 CSS 排版與樣式美化程式碼區塊
默認情況下,瀏覽器呈現 <pre><code> 區塊時雖然有等寬字體,但樣式相當簡陋:背景通常與一般頁面相同,沒有突出的區隔,長行的程式碼甚至可能溢出頁面。透過 CSS,我們可以讓程式碼展示區塊更美觀且實用。以下是幾個重點的樣式調整方向:
背景與邊框
為程式碼區塊加上一個淡色背景或邊框,讓它與正文區分開來。例如常見做法是使用淺灰色背景搭配圓角邊框,使程式碼段落看起來像一個獨立的區塊。這有助於讀者一眼就分辨出哪些內容是程式碼。你可以針對 <pre> 或更精準地針對 <pre><code> 來設定背景色。例如:
pre {
background-color: #f5f5f5; /* 淺灰背景 */
border: 1px solid #ccc; /* 淺色邊框 */
border-radius: 4px; /* 圓角邊框 */
padding: 1em; /* 內距,讓內容不貼邊 */
}
以上樣式會讓所有 <pre> 區塊呈現淡灰底色,周圍有一像素的淺灰邊框及適度的圓角,並留有一些內距。在許多教學網站或技術部落格上,這種樣式能讓程式碼區域與其他段落區隔明顯且美觀。
文字樣式
預設 <pre> 和 <code> 內容會使用瀏覽器預設的等寬字體(例如 Courier New 等)。你可以透過 CSS 自行指定字體族,或調整字體大小、行高等讓可讀性更好。例如:
pre code {
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 0.95em;
color: #2d2d2d;
}
這段 CSS 指定了幾個常見的等寬字體作為候選,並略微將字體縮小至 0.95em(相對於周圍文字稍小一點點),字體顏色改為深灰以減少刺眼的對比。調整文字樣式可以依據網站的整體設計風格靈活處理。
處理長程式行
當程式碼行非常長時,如果不加處理,可能會超出區塊範圍。預設情況下 <pre> 元素的內容不會自動換行(它等效於 CSS 的 white-space: pre; 行為,會保留空白和換行但不主動換行)。這可能導致頁面出現水平捲軸,或版面被撐寬影響閱讀體驗。為了解決長行問題,我們有兩種策略:
滾動條方式:保持原格式不換行,但允許區塊出現水平滾動條。這可以透過CSS設定:
pre {
overflow-x: auto; /* 需要時水平滾動 */
white-space: pre; /* 保留格式,不折行 */
}
如此一來,當程式碼行超過區塊寬度時,瀏覽者可以左右捲動查看,版面不會被撐壞。這是很多開發類文件網站採用的方式,因為程式碼換行有時會破壞程式的結構可讀性。
自動換行方式:允許長行在空白處或特定位置折行,以避免出現滾動。可以將 white-space 設定為 pre-wrap 來達成:
pre {
white-space: pre-wrap; /* 保留空白但允許自動換行 */
word-break: break-all; /* 如有非常長的連續字元,必要時打斷換行 */
}
這樣 <pre> 依然維持空白和縮排,但在需要時會換行。pre-wrap 模式下連續空白與換行都保留,同時允許自動換行。搭配 word-break: break-all 可以在沒有天然斷點的長字串中強制換行(例如一串無空格的長網址或編碼)。自動換行雖然避免了捲軸,但可能破壞某些程式碼的對齊,因此可視內容選擇使用。
你可以依據讀者需求和網站版面來選擇上述策略。一些響應式網站會在桌機版使用滾動條、行動版使用自動換行,以兼顧桌面大螢幕和手機小螢幕的體驗。
綜合範例
經過上述調整,我們的程式碼區塊將更具可讀性和專業感。具體範例如下,將前面討論的樣式結合:
/* 程式碼區塊的底色和邊框風格 */
pre {
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1em;
overflow-x: auto; /* 超出時出現水平滾動 */
white-space: pre; /* 保持格式,不自動換行 */
}
/* 區塊內文字的字體與大小 */
pre code {
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 0.95em;
color: #2d2d2d;
}
/* 行內程式碼片段的樣式(可選):讓行內也稍微突出 */
code {
background-color: #f0f0f0;
padding: 0 0.2em;
border-radius: 3px;
}
上面 CSS 中,我們也順帶示範了如何讓行內 <code> 元素加一點背景與圓角,呈現類似標記的效果,這在文章中夾帶程式碼片段時很好用。當然,具體的樣式數值可以依你網站整體視覺做調整。
經過 CSS 美化後,程式碼展示區塊應該已經清晰美觀許多了。接下來,我們將更進一步,探討如何透過 JavaScript 增強這些區塊的互動性,例如加入「一鍵複製」的功能,方便讀者將範例代碼複製使用。
加入 JavaScript 增加互動性(例如一鍵複製程式碼)
在許多線上教程或文件網站上,程式碼區塊旁常會出現一個複製按鈕 ????,點擊即可將該區塊內容複製到剪貼簿,方便讀者貼到自己的編輯器中。這類小細節大大提升了用戶體驗。我們可以利用瀏覽器的 Clipboard API 以及簡單的 JavaScript,為我們的 <pre><code> 程式碼區塊加上這樣的互動功能。
以下是實作步驟與範例:
加入「複製」按鈕的 HTML
在每個程式碼區塊的適當位置(通常是區塊的上方或右上角)插入一個按鈕元素。例如:
<div class="code-block">
<pre><code class="language-js">
// ... 程式碼內容 ...
</code></pre>
<button class="copy-btn">複製</button>
</div>
我們將程式碼區塊和按鈕包在一個容器 <div class="code-block"> 裡,方便後續用 CSS 排版按鈕的位置(例如絕對定位到區塊右上角)。按鈕文字可自行定義,例如「Copy」或「複製」。
撰寫 JavaScript 複製邏輯
利用 JavaScript 監聽按鈕的點擊事件,在事件中調用 Clipboard API 將對應的程式碼文字寫入使用者的剪貼簿。現代瀏覽器提供了 navigator.clipboard.writeText() 方法,可以方便地將文字複製。範例如下:
<script>
// 找到所有程式碼區塊的複製按鈕,為每個按鈕設置點擊事件
document.querySelectorAll('.code-block .copy-btn').forEach(function(button) {
button.addEventListener('click', function() {
// 找到按鈕對應的程式碼區塊文字
var codeBlock = button.parentElement.querySelector('pre code');
var codeText = codeBlock.innerText || codeBlock.textContent;
if (!codeText) return;
// 使用 Clipboard API 複製文字
navigator.clipboard.writeText(codeText).then(function() {
console.log('Code copied!');
button.innerText = '已複製'; // 提示已複製
setTimeout(function(){ button.innerText = '複製'; }, 2000);
}).catch(function(err) {
console.error('複製失敗:', err);
alert('很抱歉,無法複製內容');
});
});
});
</script>
這段程式碼做了以下事情:先選取所有帶有 .copy-btn 類的按鈕,對每個按鈕註冊一個點擊監聽器。當點擊時,透過 button.parentElement.querySelector('pre code') 找到同一區塊中的 <code> 元素,取出其中的文字內容(使用 innerText 或 textContent)。接著呼叫 navigator.clipboard.writeText(codeText) 將文字寫入剪貼簿。這個方法是異步的,會回傳一個 Promise,所以我們用 .then() 來處理成功情況,在主控台列印訊息並將按鈕文字短暫換成「已複製」,2秒後再改回「複製」,給用戶視覺反饋;如果發生錯誤(例如瀏覽器不支援或發生其他狀況),會進入 .catch(),在主控台輸出錯誤並用 alert 提示用戶操作失敗。
提醒:Clipboard API 在大多數現代瀏覽器中已被支援,但要求網站經由 HTTPS 安全連線或處於本地主機。在不安全的連線環境下,navigator.clipboard 可能是不可用的。此外,為了安全考量,瀏覽器通常要求這類寫剪貼簿的操作必須由使用者觸發(例如點擊按鈕),我們的實作已透過監聽按鈕點擊確保這點。總之,請在線上正式環境(HTTPS)下測試複製功能,若在檔案模式或非安全連線下測試可能會遇到權限問題。
按鈕樣式調整(可選)
可以用 CSS 將複製按鈕定位在程式碼區塊的右上角並隱藏預設的按鈕外觀,使其融入區塊風格。例如:
.code-block {
position: relative;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
font-size: 0.8em;
opacity: 0.6;
cursor: pointer;
}
.copy-btn:hover {
opacity: 1.0;
}
這段 CSS 先將外層 .code-block 設為相對定位,以便其中絕對定位的 .copy-btn 參考正確的定位上下文;接著將按鈕移動到區塊右上角,給定一點透明度以不干擾閱讀,滑鼠懸停時再提高不透明度等等。經過這樣的樣式處理,複製按鈕平時不會太搶眼,又在需要時隨手可及。
完成以上步驟後,每當讀者按下「複製」按鈕,即可快速將對應的程式碼文字複製到剪貼簿。這對於教學文章的讀者來說非常方便,尤其在需要嘗試範例時省去了手動選取的麻煩。
教學網站實際建議:整合 Markdown、CMS 與範例管理
當你在架設或撰寫一個技術教學網站時,除了手動編寫 HTML,你很可能會使用一些工具或平台(例如 Markdown 產生靜態網站、內容管理系統 CMS 等)。以下是幾項在實務上有用的建議,能讓你的程式碼區塊實作更順暢:
充分利用 Markdown 或部落格平台特性
如果你的網站內容是用 Markdown 編寫的,大多數情況下你不需要親自寫出 <pre><code> 標籤。只要在 Markdown 中使用三個反引號(```)包裹程式碼區塊並指定語言,例如 ```js ... ```,在產生的 HTML 中就會自動得到帶有語言 class 的 <pre><code> 結構。而 Markdown 也會自動幫你處理好特殊字元轉義,降低出錯風險。同樣地,許多部落格平台(如 WordPress、Hexo、Hugo 等)或文件框架也支援這種程式碼圍欄 (fenced code block) 語法。善用這些特性可以讓你專注於撰寫內容而不用每次都手動寫標籤。
導入現成的語法高亮方案
本教程中我們專注於手工實作基礎功能,但在實際網站上,你可能希望有語法高亮(不同關鍵字著色)、行號、可折疊區塊等更豐富的功能。與其從頭實作,不妨考慮使用現有的前端函式庫或框架。例如:
Prism.js:一個輕量且可擴充的語法高亮庫,支援多種主題和外掛,包括行號、複製按鈕外掛等。只需在頁面中引入 Prism 的 CSS 和 JS,並給 <code> 標籤加上對應語言的 class(我們之前範例中已示範 class="language-js" 的用法),Prism.js 會自動為你的程式碼區塊著色並可選配複製按鈕外掛等。
Highlight.js:另一個流行的語法高亮庫,特點是自動偵測語言(或手動指定)。用法類似,載入其腳本和樣式後,一行 hljs.highlightAll() 即可自動處理頁面上所有的 <pre><code>。
Static Site Generator 的內建功能:若你使用如 Jekyll、Hugo、MkDocs 等生成網站,很多都內建或預設支援程式碼高亮。通常只要在 Markdown 的 ``` 後標註語言,就會由後端引擎或前端 JS 自動轉換。
維護程式碼的一致性與易用性
隨著教學內容擴增,你的程式碼範例也會越來越多。建議針對程式碼區塊的 HTML 結構、CSS 類名和功能制定一套統一的規範。例如,所有程式碼區塊都使用相同的結構,按鈕類名統一為 .copy-btn 等。這樣未來想調整樣式或功能時,只需修改一處就能影響全部。
測試多終端環境
教學網站的受眾可能使用不同裝置(桌機、平板、手機)訪問,務必測試程式碼區塊在各種螢幕尺寸上的表現。例如長程式碼在手機上是否可滑動查看、複製按鈕在小螢幕上是否容易點擊等。如果發現問題,透過 CSS 媒體查詢做相應調整,如在窄螢幕上將字體縮小或按鈕圖示化等等,確保所有讀者都有良好體驗。
概括而言,在實際建置教學網站時,善用工具加上細節優化是關鍵。一開始就規劃好程式碼區塊的呈現方式,後續撰寫內容時會輕鬆很多。
完整範例:HTML + CSS + JS 綜合實作
綜合以上的原理與步驟,下面提供一個完整的範例程式碼片段。你可以將此範例儲存為一個 HTML 檔案並直接開啟,觀察程式碼展示區塊的效果。範例中包含了一段 JavaScript 程式碼作為展示內容,並實現了一鍵複製:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>程式碼展示區塊範例</title>
<style>
body { font-family: Arial, sans-serif; }
/* 程式碼區塊的樣式 */
pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1em;
overflow-x: auto;
white-space: pre;
}
pre code {
font-family: Consolas, "Courier New", monospace;
font-size: 0.95em;
color: #2d2d2d;
}
/* 複製按鈕的樣式 */
.code-block { position: relative; }
.copy-btn {
position: absolute;
top: 8px; right: 8px;
padding: 4px 8px;
font-size: 0.8em;
opacity: 0.6;
cursor: pointer;
}
.copy-btn:hover { opacity: 1; }
</style>
</head>
<body>
<h2>程式碼展示區塊測試</h2>
<p>下面是一段帶有複製按鈕的程式碼範例:</p>
<div class="code-block">
<pre><code class="language-js">
// 範例:計算陣列元素的總和
function sum(arr) {
if (!Array.isArray(arr)) {
return 0;
}
return arr.reduce((a, b) => a + b, 0);
}
// 測試
console.log(sum([1, 2, 3])); // 輸出 6
</code></pre>
<button class="copy-btn">複製</button>
</div>
<script>
document.querySelectorAll('.code-block').forEach(block => {
const button = block.querySelector('.copy-btn');
const code = block.querySelector('pre code');
button.addEventListener('click', () => {
const text = code.innerText;
navigator.clipboard.writeText(text).then(() => {
button.innerText = '已複製';
setTimeout(() => { button.innerText = '複製'; }, 2000);
}).catch(err => {
console.error('Copy failed:', err);
alert('無法複製程式碼,請手動選取複製。');
});
});
});
</script>
</body>
</html>
將上述程式碼另存為 HTML 檔並在瀏覽器中打開,可以看到我們實現的效果:一個格式良好的灰底程式碼區塊,右上角有「複製」按鈕可點擊。點擊按鈕後,如果瀏覽器允許,程式碼文字將被複製且按鈕文字短暫變為「已複製」以提示成功。
你可以嘗試在此基礎上修改,例如增加多幾個程式碼區塊測試不同語言,或調整 CSS 樣式看看效果。如果將這段程式碼放到實際網站中,別忘了確認站點是 HTTPS 且不同裝置上的行為都正常。
常見問與答 Q&A
Q: 在多行程式碼範例中,一定要同時使用 <pre> 和 <code> 嗎?
A: 最好是同時使用。<pre> 確保了原始格式(空白和換行)的呈現,而 <code> 提供語意資訊,方便未來添加樣式、腳本或讓搜尋引擎理解這是程式碼。例如,語法高亮工具通常需要你在 <code> 上標註語言類別。如果只用 <pre> 不加 <code>,語法上也是合法的,但少了語意標記;反之只用 <code> 而不包在 <pre>,又無法保留多行格式。因此兩者搭配是業界最佳實踐。
Q: 我發現直接在 HTML 裡寫程式碼片段有時很麻煩,尤其要轉義符號。可以用別的方法簡化嗎?
A: 可以。如果你覺得手寫 <pre><code> 繁瑣,建議採用 Markdown 來寫文章內容。Markdown 的程式碼區塊語法(``` 圍繞)會自動轉成正確的 HTML,而且幫你處理好 < > 等字元轉義。同樣地,某些 CMS 的所見即所得編輯器可能也有「插入程式碼」的功能,內部其實就是替你加上 <pre><code>。這樣做不僅省時,也減少人工疏失。
Q: 如何讓程式碼區塊有行號?自己加很費工,有沒有快速的解決方案?
A: 加行號純用 CSS+HTML 並非不可能,例如利用 CSS counter-increment 為每行 <code> 自動編號,或在伺服器端輸出時把程式碼拆行包裝成帶編號的列表。不過這些作法都相對繁瑣且需要較多客製。最快的方式是使用成熟的語法高亮程式庫,它們通常提供現成的行號外掛或功能。例如 Prism.js 的 Line Numbers 外掛,Highlight.js 的第三方行號套件等。一兩行設定就能自動在每行左側生成行號,而不用我們人工修改所有程式碼。
Q: 我使用你提供的 JavaScript 複製按鈕程式碼,但在某些瀏覽器上點擊沒反應,是什麼原因?
A: 最常見的原因是瀏覽器的權限或環境限制。首先,請確定你的頁面是經由 https:// 協議載入的(或在本機透過檔案檢視,本機可能有不同限制),因為 navigator.clipboard 在不安全的連線環境下通常不可用。另外,某些行動裝置瀏覽器對 Clipboard API 支援度還不完善,或者需要使用者做額外操作(例如長按文本)才能複製。如果確定環境沒問題,你可以在 .catch 中 alert 錯誤資訊來調試。
Q: <pre> 和 <code> 已經可以顯示程式碼了,為什麼還需要其它語意化的元素,例如 <samp> 或 <kbd>?它們有何不同?
A: <samp> 和 <kbd> 也是HTML提供的語意元素,分別代表「程式輸出範例」(sample output)和「鍵盤輸入」(keyboard input)。它們通常也以等寬字體呈現,但語意用法不同。舉例說,如果在文件中展示的是終端機輸出的結果,使用 <samp> 會比 <code> 更貼切語意;如果要表示使用者需要按下的按鍵(例如 Press <kbd>Enter</kbd>),用 <kbd> 最恰當。
Q: 未來如果我要在教學網站加上可切換明暗主題的功能,程式碼區塊的樣式有需要注意什麼嗎?
A: 如果你的網站打算實現深色模式(Dark Mode) / 淺色模式切換,程式碼區塊的配色也需要跟著切換。建議在設計CSS時就考慮到這點。你可以使用媒體查詢 @media (prefers-color-scheme: dark) 來定義暗色主題下不同的背景和文字顏色。例如,在深色主題時讓程式碼區塊背景變成深灰、文字變淺色。若使用語法高亮庫,大多也提供深色主題的CSS,可以在切換時動態載入。
以上就是關於使用 <pre> 和 <code> 建立程式碼展示區塊的完整教學與實戰經驗分享。透過正確運用HTML元素、巧妙的CSS美化,以及必要的JavaScript強化互動,你可以打造出專業且友好的程式碼範例區域,為讀者提供良好的學習體驗。希望本篇內容對你有所幫助,並祝你在教學網站的開發中順利愉快!
