2.1 標籤 <pre>
在 HTML 中，標籤 <code> 與 <pre> 用於表示程式碼片段和預先格式化的文本。 它們可提高可讀性並保持原始文本格式，非常適合顯示程式碼範例和其他技術材料。
標籤 <pre>（是 "preformatted text" 的縮寫）用於在 HTML 中顯示文本，保持其編寫時的樣子，包含所有空格、換行和製表符。這對於顯示大段程式碼或其他預先格式化的文本特別有用。
語法：
<pre>
文本
</pre>
範例：
HTML
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
在此範例中，<pre> 標籤中的文本將顯示為原始格式，包括所有空格和換行。
<pre> 標籤的特點：
- 標籤
<pre>保存文本中的所有空格和換行 - 它以等寬字體顯示文本
- 通常與
<code>標籤一起使用以突顯程式碼
2.2 標籤 <code>
標籤 <code> 用於標識文本中的程式碼片段或其他機器可讀的數據。它通常用於突顯程式碼行，變數，函數以及其他編程元素。
<code>代碼</code>
範例：
HTML
<p>要在控制台輸出消息，請使用函數 <code>console.log()</code>。</p>
在此範例中，"console.log()" 將被突顯為代碼。
<code> 標籤的特點：
- 標籤
<code>以等寬字體顯示文本（通常是 Courier 或 Consolas） - 它不保存格式，如換行或縮進
- 標籤
<code>經常在其他標籤內使用，如<p>、<li>或<pre>
2.3 使用 <pre> 和 <code>
為了突顯和格式化大段程式碼，通常一起使用 <pre> 和 <code> 標籤。 這樣可以保持格式並將文本突顯為程式碼。
範例：
HTML
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
HTML
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
結果就是瀏覽器將顯示保持格式的文本並突顯程式碼。
2.4 語法高亮
可以使用像 Prism.js 或 Highlight.js 這樣的第三方庫來進行語法高亮，這些工具可以自動識別並高亮顯示網頁上的程式碼語法。
使用 Highlight.js 的範例：
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
結果是代碼塊將根據 JavaScript 的語法自動高亮顯示。
HTML 中的標籤 <code> 和 <pre> 是用於顯示和格式化程序代碼及其他需要保持原始格式的文本的強大工具。好好享受使用它們吧。
GO TO FULL VERSION