简介
Prism 是一个轻量级且强大的语法高亮库，它支持常见的编程语言和标记语言，还可以添加自定义语言定义和语法高亮风格。Prism 支持多种方式使用，其中一种是通过 npm 包安装和使用。
本文将介绍如何通过 npm 包 prismejs 安装和使用 Prism。
安装
可以通过 npm 包管理工具安装 Prism：
npm install prismjs
该命令将下载 Prism 并将其添加到你的项目的 node_modules 文件夹中。
使用
Prism 可以通过 DOM 直接使用或者作为模块使用。
DOM 直接使用
可以通过 prism.js 和 prism.css 文件将 Prism 添加到项目中，然后使用以下代码初始化 Prism：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---------------
----- ---------------- -------------------------
-------
------
---------- ----------------------------
------------------- ---------
-------------
------- --------------------------------
--------------------------------------
-------
-------以上代码将会高亮显示 JavaScript 代码。
作为模块使用
Prism 还可以作为模块使用，下面是一个使用 Webpack 和 ES6/TypeScript 的示例：
-- -------------------- ---- -------
------ ----- ---- ----------
------ ---------------------------
------ --------------------------------------
----- ---- - -
-------- --------------------- ------- -
---------------------
-
-------------------- ---------
--
--------------------------------------------------- -
--------------------- --------------------------- --------------以上代码将会在页面上显示 TypeScript 代码。
自定义语言
Prism 支持自定义语言定义，只需在你的代码中添加新的语言定义，然后使用 Prism 和自定义语言 ID 来高亮显示代码。
下面是一个自定义语言定义的示例：
Prism.languages.custom = {
// 定义自己的语法规则
};
Prism.highlight('/* code */', Prism.languages.custom, 'custom');以上代码将会高亮显示注释中的 /* code */ 代码，该代码使用 ID 为 custom 的自定义语言定义。
最佳实践
以下是一些使用 Prism 的最佳实践：
只针对需要高亮显示的代码使用 Prism。不要将整个页面包装在 Prism 中。
如果您的应用程序支持 IE 浏览器，请使用
Element.matches()而不是Element.classList.contains()。将 CSS 和 JavaScript 分别单独加载，这样可以提高性能并避免 FOUC（无样式内容的闪烁）。
结论
通过 npm 包 prismejs 安装和使用 Prism 可以很容易地实现语法高亮显示，该库支持常见的编程语言和标记语言，还可以添加自定义语言定义和语法高亮风格。在使用 Prism 时，请遵循最佳实践，以提高性能并避免问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3563