2.1 标签 <pre>
标签 <code> 和 <pre> 在 HTML 中用于表示代码片段和预格式化文本。 它们可以提高可读性并保留原始文本的格式，这对于显示代码示例和其他技术资料特别有用。
标签 <pre>（即 "预格式化文本" 的缩写）用于在 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