在前端开发中，我们常常需要在页面上展示代码段以供阅读和复制。为了让代码更具有可读性，我们通常需要对代码进行一定的高亮处理。而 Prismjs 就提供了这样一个优秀的方案。
通过使用 npm 包 node-prismjs，我们可以很方便地在 Node.js 项目中使用 Prismjs，为我们的代码段增加高亮效果。下面是一份详细的使用教程。
安装
首先，我们需要安装 node-prismjs 这个 npm 包：
npm install node-prismjs
使用
node-prismjs 的使用非常简单，只需要以下几个步骤即可。
引入
在代码中引入 node-prismjs：
const prismjs = require('node-prismjs');配置
我们需要设置一些 Prismjs 的配置。在使用 node-prismjs 时，有三个配置项可以用于定制化：
- languages：需要高亮的语言列表
- plugins：需要使用的 Prismjs 插件
- theme：使用的主题
现在我们只需要一个基础配置，用于高亮 JavaScript 代码，可以将以下代码添加到你的项目中：
-- -------------------- ---- ------- ----- ------- - ------------------------ ----- --------- - - ----------- ----------------------------- -- ----- ------- - --- ----- ----- - -------- ------------------------------- -------- -------
如果你想使用其他语言或插件，也可以在这里进行相关配置。
渲染代码
最后，我们只需要将代码块用 pre 和 code 包裹起来，并为 code 标签添加正确的语言类名即可实现代码高亮：
<pre>
<code class="language-javascript">
var hello = 'Hello, world!';
console.log(hello);
</code>
</pre>这时候，页面上的代码块就会被 Prismjs 高亮处理啦！
示例
以下是一个完整的示例，你可以将代码粘贴到你的项目中，测试一下效果：
-- -------------------- ---- ------- ----- ------- - ------------------------ ----- --------- - - ----------- ----------------------------- -- ----- ------- - --- ----- ----- - -------- ------------------------------- -------- ------- ---------------------------------- ----- - ------- ---------- --------------------- ---------------
<pre>
<code class="language-javascript">
var hello = 'Hello, world!';
console.log(hello);
</code>
</pre>你可以在本地运行这个示例，然后查看页面上的代码块是否已被 Prismjs 高亮处理。
结论
使用 node-prismjs 可以很方便地在 Node.js 项目中使用 Prismjs，为我们的代码段增加高亮效果。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64168