在前端开发中，代码高亮是一个非常重要的需求。prismjs2 是一个使用简便的 npm 包，可以轻松实现对代码的高亮显示。本篇教程将介绍如何使用这个 npm 包，并附带详细的示例代码。
安装
首先，需要使用 npm 安装 prismjs2。
npm install prismjs2 --save
接下来，我们需要引入这个 npm 包和样式：
import Prism from 'prismjs2' import 'prismjs2/themes/prism.css'
使用方法
Prism 可以解析所有的语言，并为其提供高亮显示，同时也可以根据需要自定义其样式。以下是一些常见的用法示例：
1. 高亮代码块
将要高亮的代码放在 <pre> 标签中，并在标签中添加要高亮的语言。
<pre><code class="language-css">
body {
background-color: #f5f5f5;
}
</code></pre>然后，使用以下代码绑定 Prism：
Prism.highlightAll();
Prism 将自动为代码添加对应的高亮样式。
2. 指定语言
如果不想使用自动检测语言，可以指定要高亮的语言。
-- -------------------- ---- -------
---------- ------------------------
------------ --------
------------
------------
----------------------------------
-------------
------------
--------------- -----------------
-------------
-------------
-------------然后，使用以下代码绑定 Prism：
Prism.highlightAllUnder(document, false, null);
这将仅高亮 language-markup 的内容。
3. 自定义主题
Prism 支持自定义主题。使用以下命令安装主题：
npm install prismjs2/themes/prism-okaida.css --save
然后，在引入 Prism 之前，将样式文件引入。示例代码如下：
import 'prismjs2/themes/prism-okaida.css'
4. 使用插件
Prism 还支持添加插件来扩展其功能。使用以下命令安装插件：
npm install prismjs2/plugins/line-numbers/prism-line-numbers.css --save npm install prismjs2/plugins/line-numbers/prism-line-numbers.js --save
然后，在引入 Prism 之前，将样式和脚本文件引入。示例代码如下：
import 'prismjs2/plugins/line-numbers/prism-line-numbers.css' import 'prismjs2/plugins/line-numbers/prism-line-numbers.js'
现在，您可以使用以下代码启用插件：
Prism.plugins.lineNumbers.activate();
这将为代码添加行号。
总结
本篇教程介绍了如何使用 Prismjs2 这个 npm 包来实现对代码的高亮显示，并提供了详细的示例代码。希望本篇教程能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d0927023822986