@masqt/react-highlight 是一个用于高亮显示代码的 npm 包，基于 Prism.js 库开发。在前端开发过程中，经常需要用到代码高亮功能，这个包可以帮我们方便快捷地实现这个需求。
安装
在命令行中输入以下命令安装：
npm install @masqt/react-highlight
使用
在需要显示代码的地方加入组件 <Highlight> 并传入相关属性即可。例如：
-- -------------------- ---- -------
------ --------- ---- -------------------------
----- ---- - ------ ---- - --------
------------------- - - --------
-------- --------------- -
------ -
---------- --------------------- ----------- --
--
-上面代码中，我们传入了两个属性 language 和 code，language 表示要高亮显示的代码语言，这里我们传入的是 JavaScript。code 是要显示的代码块。
你还可以设置其他属性，如行号、是否显示代码高亮风格等等。
示例
下面我们来看一段完整的示例代码：
-- -------------------- ---- -------
------ ---------- - ------------ - ---- -------------------------
------ - ---------- -------- - ---- --------
-------- --------------- -
----- ------ -------- - -------------
------------ -- -
----------------------------------------------------------------------------
----------- -- -----------
------------ -- ---------------
-- ----
------ -
---------- ----------------- --------------------- ----------- --
--
-这段代码从 GitHub 上获取代码块，然后使用 <Highlight> 组件进行高亮显示。
总结
使用 @masqt/react-highlight 包可以更加简单快捷地高亮显示代码，这个包的定制性也很高，你可以根据自己的需求自由设置。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc981e8991b448e6511