介绍
xrb-prettify 是一个基于可扩展的语法高亮库 Prism 的 npm 包。它可以更好地将代码在网页上展示出来，提高代码可读性，方便其他开发者理解代码的含义。xrb-prettify 支持多种语言、配色方案，且易于使用。
操作步骤
1. 安装
在命令行中输入以下命令安装 xrb-prettify：
npm install xrb-prettify --save-dev
2. 引入
在 HTML 文件中引入 CSS 文件和 JS 文件：
<link href="node_modules/xrb-prettify/dist/xrb-prettify.css" rel="stylesheet" /> <script src="node_modules/xrb-prettify/dist/xrb-prettify.js"></script>
3. 调用
调用 xrbPrettify() 函数对需要高亮的 <code> 标签进行设置：
-- -------------------- ---- -------
-----
----- ----------------------------
----- --- - ------ ----- -- ---- - -----
------------------ ----
-------
------
--------
--------------
---------4. 配置
xrb-prettify 支持一些可选配置，可以在调用函数时传入配置对象：
xrbPrettify({
languages: ["javascript", "css", "html"],
theme: "tomorrow",
plugins: ["line-numbers"],
lineNumberStart: 1,
lineNumberPaddTop: "0px",
lineNumberPaddLeft: "10px",
});languages：要高亮的语言数组，默认是 ["javascript", "css", "html"]theme：配色方案，默认是 "coy"，可选 ["a11y-dark", "coy", "darcula"]plugins：要使用的插件数组，可选 ["line-numbers"]lineNumberStart：行号起始值，默认是 1lineNumberPaddTop：行号距顶部的 padding 值，默认是 "5px"lineNumberPaddLeft：行号距左边的 padding 值，默认是 "10px"
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ------------
----- ------------------------------------------------------ ---------------- --
-------
------
---------------- ---------
-------------------
-----
----- ----------------------------
----- --- - ------ ----- -- ---- - -----
------------------ ----
-------
------
------------
-----
----- ---------------------
---- -
----------------- --------
-
-------
------
-------------
-----
----- ----------------------
------- ---------------------
--------------- -----------------
------------
-------
------
------- --------------------------------------------------------------
--------
-------------
---------- -------------- ------ --------
------ ------------
-------- -----------------
---------------- --
------------------ ------
------------------- -------
---
---------
-------
-------总结
使用 xrb-prettify 可以很方便地给网页上的代码添加高亮效果，提高代码可读性，方便其他开发者理解代码的含义。同时，xrb-prettify 支持多种语言、配色方案和插件，可以根据实际需求进行自定义配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005756081e8991b448ea541