HTML <code> 顯示程式碼內容

<code> 標籤 (tag) 用來顯示電腦程式碼 (computer code) 內容,而瀏覽器預設會以 monospace 等寬字型 (fixed-width font) 來顯示 <code> 中的內容。

舉個例子:

<p>Regular text. <code>This is code.</code> Regular text.</p>

顯示結果:

Regular text. This is code. Regular text.

你需要將 <code> 裡面的 HTML 標籤符號 < 轉成 HTML entities &lt;,以確保碰到 closing tag 時不會被瀏覽器解譯為是 HTML 標籤而造成顯示錯誤。

<code> 也常用來和 <pre> 一起使用,讓 <code> 裡面的程式碼的空白和換行都可以被保留。

例如:

<pre>
<code>
p {
  color: #333;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}
</code>
</pre>

顯示結果:


p {
  color: #333;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}