HTML 如何在HTML中高亮源代码

在本文中，我们将介绍如何在HTML中高亮源代码的方法和技巧。在开发网页时，常常需要显示代码示例，为了提高代码的可读性和美观性，我们可以将源代码进行高亮显示。下面将介绍几种常用的实现源代码高亮的方法。

阅读更多：HTML 教程

1. `<code>` 和 `<pre>` 标签

<code> 和 <pre> 是HTML中用于标记代码的标签，可以通过设置样式来实现代码的高亮显示。通过为代码设置合适的样式，如字体、颜色、背景颜色等，可以使代码更加易读。

示例代码：

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

2. 使用 Prism.js 库

Prism.js 是一个轻量级的语法高亮库，支持多种语言的代码高亮显示。只需要在HTML页面中引入Prism.js文件，并为包含代码的元素添加合适的类名，就可以实现代码高亮显示。

示例代码：

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

3. 使用 highlight.js 库

highlight.js 是另一个常用的语法高亮库，支持多种语言的代码高亮显示。同样只需要在HTML页面中引入highlight.js文件，并为包含代码的元素添加合适的类名，就可以实现代码高亮显示。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <link href="highlight.css" rel="stylesheet" />
    <script src="highlight.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <pre><code class="javascript">
        function sayHello() {
            console.log("Hello, world!");
        }
    </code></pre>
</body>
</html>

4. 在线工具

除了使用库进行代码高亮，还可以使用一些在线工具来生成带有高亮效果的代码，然后将生成的代码嵌入到HTML页面中。这些在线工具通常提供了丰富的样式和定制选项，可以根据需求生成自定义的高亮代码。

示例网站：
– TOHTML
– Quickhighlighter

总结

在HTML中高亮源代码可以通过多种方法实现，其中使用<code>和<pre>标签、Prism.js库和highlight.js库是常见的方式。根据项目需求和个人喜好选择适合的方法进行代码高亮，提升代码的可读性和美观性。另外，使用在线工具生成带有高亮效果的代码也是一种快速且方便的方式。希望本文介绍的方法能够帮助读者在HTML中实现代码的高亮显示。