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