简介
在前端开发中，代码高亮是非常常见的需求。为了解决这个问题，出现了很多的代码高亮方案，其中很多都是基于 prism 实现。本文将介绍一款 npm 包 cracked-prism，这个包基于 prism，但是更为轻量级和易于使用。
安装
可以使用 npm 直接安装：
npm install cracked-prism --save
或者通过 yarn 安装：
yarn add cracked-prism
使用
cracked-prism 的使用非常简单，只需要引入样式和脚本即可。下面的代码示例演示了如何在 html 文件中使用 cracked-prism。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----- ---------------
----- ---------------- ---------------------------------------------------------------------------- --
-------
------
---------- ----------------------------
----- -------- - -- -- -
------------------- ---------
--
-----------
-------------
------- ------------------------------------------------------------------------------------
-------
-------上面的代码将会在页面中输出一段 JavaScript 代码，使用 cracked-prism 进行渲染，如下所示：
const sayHello = () => {
console.log("Hello, World!");
};
sayHello();自定义配置
除了默认的配置外，cracked-prism 还提供了多种配置选项，可以满足不同的需求。下面的代码片段展示了一些自定义配置的方式。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----- ------------- ---------------
----- ---------------- ---------------------------------------------------------------------------- --
-------
-------- -
-------- -----
---------------- -------
------------ -------
---------- -----
------- ------
----------------- ------
------ ------
-------- -----
-
--------
-------
------
---------- ---------------------
-------- -
-------- -----
---------------- -------
------------ -------
---------- -----
------- ------
----------------- ------
------ ------
-------- -----
-
-------------
---- --------------------------- --------------------------- ----------------------- ---------------
----- ---------- - -- -- -
------------------- ---------
--
-------------
-------------
------- ------------------------------------------------------------------------------------
--------
-------------------------
------------ -----
---------- -----
---------------- ----
---------------- ------
-------- ---------- -
------------------------------------
--
--------- ---------- -
-------------------------
--
----------- ---------- -
--------------------------
--
-------- --------------- -
-------------------
-
---
---------
-------
-------上面的代码将会渲染出两个代码块，一个是居中对齐、红色字体的 CSS 代码，一个是 JavaScript 代码，带有行号且初始为折叠状态，默认显示的行数为 3，折叠后显示的占位符为 '...'。
总结
Cracked Prism 作为一个轻量级的代码高亮工具，简单易用，且提供了可定制的配置，可以满足开发者的不同需求。我们可以在日常的开发中使用它，以提供更佳的用户体验和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005688a81e8991b448e4778