如何在HTML页面中展示代码块：使用<pre>标签、使用<code>标签、使用代码高亮库。推荐使用<pre>和<code>标签结合的方式，因为它们能够保留代码的格式和缩进，同时使用代码高亮库如Highlight.js可以增加代码的可读性。以下是详细步骤和示例：
一、使用<pre>标签和<code>标签展示代码块
在HTML中，<pre>标签能够保留代码的空格和换行，使代码块的格式与编写时一致。而<code>标签则用于表示代码段。结合使用这两个标签，可以很方便地在网页中展示代码块。
<!DOCTYPE html>
<html>
<head>
<title>Code Block Example</title>
</head>
<body>
<h1>HTML Code Block Example</h1>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code>
</pre>
</body>
</html>
二、使用代码高亮库
1. Highlight.js
Highlight.js 是一个流行的代码高亮库，支持多种编程语言。通过引入Highlight.js，可以使代码块更加美观和易读。
- 引入Highlight.js：
在HTML文件的
<head>标签中添加以下内容：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
- 使用
<pre>和<code>标签展示代码：
<!DOCTYPE html>
<html>
<head>
<title>Code Block Example with Highlight.js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<h1>Code Block Example with Highlight.js</h1>
<pre>
<code class="html">
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code>
</pre>
</body>
</html>
三、其他代码高亮库
除了Highlight.js，还有其他优秀的代码高亮库，如Prism.js和Prettify。
1. Prism.js
Prism.js 是另一个流行的代码高亮库，支持多种编程语言和主题。
- 引入Prism.js：
在HTML文件的
<head>标签中添加以下内容：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
- 使用
<pre>和<code>标签展示代码：
<!DOCTYPE html>
<html>
<head>
<title>Code Block Example with Prism.js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
</head>
<body>
<h1>Code Block Example with Prism.js</h1>
<pre>
<code class="language-html">
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code>
</pre>
</body>
</html>
2. Prettify
Prettify 是Google维护的代码高亮库，易于使用且支持多种语言。
- 引入Prettify：
在HTML文件的
<head>标签中添加以下内容：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script>window.addEventListener('load', function() { prettyPrint(); });</script>
- 使用
<pre>和<code>标签展示代码：
<!DOCTYPE html>
<html>
<head>
<title>Code Block Example with Prettify</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script>window.addEventListener('load', function() { prettyPrint(); });</script>
</head>
<body>
<h1>Code Block Example with Prettify</h1>
<pre class="prettyprint">
<code>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code>
</pre>
</body>
</html>
四、综合使用案例
为了展示代码块的完整功能，以下是一个综合使用Highlight.js和Prism.js的案例，并添加了CSS自定义样式以增强代码块的视觉效果。
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive Code Block Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.code-container {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
hljs.highlightAll();
Prism.highlightAll();
});
</script>
</head>
<body>
<h1>Comprehensive Code Block Example</h1>
<div class="code-container">
<h2>Highlight.js Example</h2>
<pre><code class="html">
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code></pre>
</div>
<div class="code-container">
<h2>Prism.js Example</h2>
<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code></pre>
</div>
</body>
</html>
通过上述内容，我们全面了解了如何在HTML页面中展示代码块，包括使用基本的<pre>和<code>标签，以及使用先进的代码高亮库如Highlight.js和Prism.js。这些方法不仅能够保留代码的原始格式，还能增强代码的可读性和美观度。
相关问答FAQs：
1. 如何在HTML页面中展示代码块？
- 在HTML页面中展示代码块的常用方法是使用
<pre>和<code>标签组合，可以保留代码的格式和缩进。 - 可以将代码放置在
<pre>标签内，并使用<code>标签将代码包裹起来，这样可以保持代码的格式和高亮显示。
2. 如何实现代码块的语法高亮效果？
- 实现代码块的语法高亮效果可以使用第三方库或插件，如 Prism.js 或 Highlight.js。
- 在引入相应的库或插件后，将代码块的语言类型指定为相应的类名，库或插件会自动为代码添加语法高亮效果。
3. 如何添加行号到代码块中？
- 如果希望代码块中显示行号，可以使用第三方库或插件，如 Prism.js 或 Highlight.js。
- 在引入相应的库或插件后，按照文档中的说明，添加相应的配置选项即可实现代码块中的行号显示。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3059790
