使用highlight.js实现JavaScript代码高亮

"本文将介绍如何使用JavaScript库highlight.js来实现代码高亮显示，适用于各种编程语言，如Java、JavaScript和PHP等。通过使用highlight.js，可以让代码的关键字、方法名和字符串等内容呈现不同颜色，提高代码可读性。" 在网页上展示代码时，为了让代码更易于阅读和理解，通常会采用代码高亮技术。`highlight.js`是一个流行的JavaScript库，专门用于对代码进行语法高亮。这个库支持多种编程语言，并且可以自定义主题，以满足不同设计需求。下面我们将详细介绍如何在你的网页中集成`highlight.js`来高亮你的代码。 首先，你需要在项目中引入`highlight.js`的库文件。你可以从官方网站（https://highlightjs.org/download/）下载所需的CSS和JS文件，或者通过CDN链接直接引用。例如： ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> ``` 接下来，将你的代码包裹在`<pre>`和`<code>`标签内，并指定编程语言类型，例如`class="language-javascript"`： ```html <pre class="hljs"> <code class="language-javascript"> function getPersonInfo(name, age, sex) { console.log(name + age + sex); } // 这样传，name就成了18，age成了王二了。 getPersonInfo('18', '王二', '男'); // 所以可以这样写 function getPersonInfo(args) { console.log(args); } </code> </pre> ``` 为了使`highlight.js`生效，你需要在页面加载完成后调用`hljs.initHighlighting()`函数，初始化代码高亮： ```javascript document.addEventListener('DOMContentLoaded', function () { hljs.initHighlighting(); }); ``` 如果需要手动处理某些代码块的高亮，可以使用`hljs.highlightElement()`方法： ```javascript const codeBlock = document.querySelector('pre code'); hljs.highlightElement(codeBlock); ``` `highlight.js`提供了丰富的自定义选项，比如更换主题或添加额外的语言支持。你可以在初始化时传递配置对象，例如： ```javascript hljs.configure({ useBR: true, // 使用<br>换行 tabReplace: ' ', // 将制表符替换为两个空格 }); hljs.initHighlighting(); ``` 此外，`highlight.js`还支持自动检测代码语言，只需去掉`<code>`标签上的`class`属性，库会尝试根据代码内容识别语言： ```html <pre class="hljs"> <code> function getPersonInfo(name, age, sex) { console.log(name + age + sex); } </code> </pre> ``` 总结起来，`highlight.js`是一个强大且易于使用的代码高亮库，能够为你的网页代码提供美观的高亮效果。通过正确地引入库文件、设置代码块和调用初始化方法，你可以轻松地在自己的项目中实现代码高亮，提升用户体验。同时，利用配置选项和自定义主题，你可以进一步定制代码高亮的样式，使其与你的网站风格相匹配。