使用highlight.js实现代码高亮

"使用highlight.js实现JavaScript代码高亮显示" 在网页中展示代码时，为了提高可读性和视觉效果，通常会采用代码高亮的方法。`highlight.js` 是一个流行的JavaScript库，它能够自动识别多种编程语言并进行语法高亮。在本文中，我们将探讨如何在JavaScript环境下使用`highlight.js`来高亮你的代码。 首先，引入`highlight.js`库到你的HTML文件中。你需要下载`highlight.js`库或通过CDN链接将其添加到你的页面头部。例如，你可以使用以下CDN链接: ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/monokai.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> ``` 这里我们选择了`monokai`主题样式表，当然，`highlight.js`提供了许多其他风格供选择。 接下来，你需要在HTML中包裹你的代码块。使用`<pre>`和`<code>`标签，同时设置类名为对应的语言类型，例如对于JavaScript代码： ```html <pre class="hljs language-javascript"> <code> // 示例JavaScript代码 function getPersonInfo(name, age, sex) { console.log(name + age + sex); } getPersonInfo('18', '王二', '男'); </code> </pre> ``` 注意到，我们添加了`language-javascript`类来指定代码块的类型，这有助于`highlight.js`正确识别并高亮。 现在，你需要在文档加载完成后调用`highlight.js`的初始化方法，以应用高亮样式： ```javascript document.addEventListener('DOMContentLoaded', function () { hljs.highlightAll(); }); ``` 这段代码会在页面内容加载完成后遍历所有`hljs`类的元素，并应用相应的高亮效果。 在上面的例子中，`<span>`标签用于表示不同类型的代码元素，如关键字（`<span class="hljs-keyword">function</span>`）、方法名（`<span class="hljs-title">getPersonInfo</span>`）、参数（`<span class="hljs-params">name,age,sex</span>`）、内置对象（`<span class="hljs-built_in">console</span>`）和注释（`<span class="hljs-comment">//...</span>`），它们分别被赋予不同的颜色，使得代码更易于阅读。 此外，`highlight.js`还支持自定义主题和语言，你可以通过扩展或修改CSS样式来自定义你的代码高亮风格，或者注册新的编程语言。如果你希望在不改变现有样式的情况下添加新的语言支持，可以使用`hljs.registerLanguage()`方法。 `highlight.js`是一个强大且灵活的工具，能帮助你轻松地在网页中实现代码高亮显示。无论你是个人博客作者还是开发者，它都能让你的代码示例更加专业和易读。通过理解其基本使用方法和配置选项，你可以根据自己的需求定制代码高亮效果，提升用户体验。