用 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 程式碼塊。