用 HTML 編寫程式碼塊

Rajeev Baniya 2023年1月30日 2022年6月15日
  1. <code> 標記及其內容包裝在 <pre> 標記中以在 HTML 中編寫程式碼塊
  2. 使用 <code> 標記和 CSS white-space 屬性在 HTML 中編寫程式碼塊
用 HTML 編寫程式碼塊

本文將介紹幾種在 HTML 中編寫程式碼片段塊的方法。

<code> 標記及其內容包裝在 <pre> 標記中以在 HTML 中編寫程式碼塊

<code> 標籤定義了一段計算機程式碼。裡面的內容以瀏覽器預設的 monospace 字型顯示。

標籤用於表示 HTML 中的程式碼塊。該標籤是一個內聯標籤。

這意味著如果我們在 <code> 標籤內編寫程式碼片段,標籤內的內容將顯示在一行中。它不保留換行符或空格。

<pre> 標籤定義了預格式化的文字。 <pre> 元素中的任何文字都以固定寬度字型顯示,並且文字保留空格和換行符。

<pre> 標記內的文字或內容將完全按照 HTML 原始碼中的內容顯示。 <pre> 標籤是塊級元素。

如果我們將 <code> 標籤及其內容包裝在 <pre> 標籤內,<code> 標籤內的內容將表現為塊級元素。內容將具有 monospace 字型,並且程式碼片段的換行符和空格也將被保留。

例如,編寫一些 JavaScript 程式碼並將程式碼包裝在 <code> 標記中。接下來,用 <pre> 標籤包裝 <code> 元素。

示例程式碼:

<p>Code snippet for addition of two numbers in javascript</p>
<pre>
  <code>
    function add (a,b) {
    sum = a + b;
    return sum;
    }
  </code>
</pre>

上面的示例將顯示 JavaScript 程式碼塊。

使用 <code> 標記和 CSS white-space 屬性在 HTML 中編寫程式碼塊

在這個方法中,我們將使用一些 CSS 樣式來尋找 <pre> 標籤的替代品。以前,我們知道 <code> 元素是一個內聯元素。

我們使用了 <pre> 標記使其成為塊級元素。但是,我們也可以通過將 display 屬性設定為 block 來使 <code> 標籤成為塊級元素。

我們可以通過將其 white-space 屬性設定為 pre-wrap 來保留 code 標籤的換行符和空格。因此,它將顯示以 HTML 原始碼編寫的程式碼片段。

因此,我們將能夠在 HTML 中建立程式碼塊。

例如,建立一個 <code> 標記並在其中編寫一些 JavaScript 程式碼片段。給 <code> 標籤一個 sum 的類名。

在 CSS 中,選擇 sum 類並將 display 屬性設定為 block 並將 white-space 屬性設定為 pre-wrap

示例程式碼:

<code class="sum">
  function (a, b) {
  sum = a + b;
  return sum;
  }
</code>
.sum {
  display: block;
  white-space: pre-wrap;
}

上面的程式碼示例將生成一個 JavaScript 程式碼塊。