如何在HTML页面中展示代码块，提升网页可读性

在网页开发中，展示代码块是一个常见的需求，尤其是在技术博客、教程或文档类网站中。本文将详细介绍如何在HTML页面中展示代码块，并通过多种方法提升代码的可读性和美观性。

使用<pre>和<code>标签展示代码块

在HTML中，展示代码块最常用的方法是使用<pre>和<code>标签。<pre>标签用于保留文本中的空格和换行格式，而<code>标签则用于表示代码片段。通过结合这两个标签，可以确保代码在网页中以原始格式显示。：

<pre>
    <code>
        function helloWorld() {
            console.log("Hello, World!");
        }
    </code>
</pre>

这种方法简单易用，适合展示较短的代码片段。对于较长的代码块或需要高亮语法的情况，可能需要借助其他工具或库。

使用第三方库实现代码高亮

为了提升代码的可读性，许多开发者会选择使用第三方库来实现代码高亮。以下是几种常见的代码高亮库：

Prism.js

Prism.js 是一个轻量级的代码高亮库，支持多种编程语言和主题。使用 Prism.js 非常简单，只需引入相应的CSS和JS文件，并在HTML中添加对应的类名即可。：

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>
<pre><code class="language-javascript">
    function helloWorld() {
        console.log("Hello, World!");
    }
</code></pre>

Highlight.js

Highlight.js 是另一个流行的代码高亮库，支持自动检测编程语言并应用相应的样式。使用方法与 Prism.js 类似，只需引入库文件并添加类名即可。

优化代码块的显示效果

除了使用高亮库，还可以通过CSS进一步优化代码块的显示效果。，为代码块添加背景色、边框、阴影等样式，使其更加美观。以下是一些常见的CSS样式：

pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba
(
0, 
0, 
0, 0.1);
}

通过这些样式，可以让代码块在网页中更加突出，提升用户体验。

在HTML页面中展示代码块是网页开发中的常见需求。通过使用<pre>和<code>标签，结合第三方高亮库和CSS样式，可以轻松实现代码块的展示和美化。无论是技术博客还是文档类网站，优化代码块的显示效果都能显著提升网页的可读性和专业性。