简介
Prism.js 是一个轻量级的语法高亮库，支持多种编程语言和文本格式。它是一个基于 JavaScript 的 NPM 包，可以在前端项目中方便地使用。
本文将详细介绍如何在你的项目中使用 Prism.js，包括安装、配置和示例代码。
安装
要使用 Prism.js，首先需要在你的项目中安装它。可以通过 npm 命令进行安装：
npm install prismjs --save
或者，你也可以通过 CDN 引入 Prism.js：
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/prism.js"></script>
配置
安装完成后，需要对 Prism.js 进行配置。常见的配置项包括语言、主题和插件等。
语言
Prism.js 支持多种编程语言和文本格式的语法高亮。为了让 Prism.js 正确地高亮你的代码，需要设置当前页面所使用的语言。可以在 HTML 文件中添加以下代码：
<pre><code class="language-javascript"> // your code here </code></pre>
其中 class 属性的值应该根据你的代码语言来决定。例如，如果你的代码是 JavaScript 代码，则应该设置为 language-javascript。
主题
Prism.js 支持多种主题，可以通过引入不同的 CSS 文件来切换主题。在使用 CDN 引入 Prism.js 的情况下，可以在 HTML 文件中添加以下代码来引入主题：
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css" rel="stylesheet" />
也可以通过 npm 安装主题包，然后在 JavaScript 文件中导入：
import 'prismjs/themes/prism.css';
插件
除了基本功能外，Prism.js 还提供了一些插件，例如行号、复制代码等。可以在需要的页面中按照文档说明进行配置和使用。
示例代码
下面是一个完整的示例代码，演示如何在项目中使用 Prism.js 进行语法高亮：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
----- ------------------------------------------------------------------- ---------------- --
-------
------
---------- ----------------------------
----- ----- - ------ -- -
------------------- -----------
-
---------------
-------------
------- --------------------------------------------------------------------
--------
------------- - -------- -- -
---------------------
--
---------
-------
-------在上面的示例中，我们使用了 JavaScript 语言，并引入了 Prism.js 的默认主题。在 JavaScript 文件中，我们定义了一个简单的函数，并在页面中进行展示。
最后，在页面加载完成后，我们调用 Prism.highlightAll() 方法来对代码进行高亮处理。
总结
本文介绍了如何在前端项目中使用 Prism.js 进行语法高亮。通过本文的学习，你可以掌握如何安装、配置和使用 Prism.js，并且能够在自己的项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43232