在前端项目中，代码高亮是实现文本或代码块突出显示的常用方式。而 react-highlight.js 是一个 NPM 包，它提供了一种在前端 React 程序中实现代码高亮的解决方案。
React-highlight.js 介绍
react-highlight.js 是一个基于 highlight.js 的 React 组件库，它可以让你在你的 React 应用中，方便快捷地实现代码高亮。react-highlight.js 支持超过 180 种编程语言的代码块高亮显示，同时提供了多种风格的主题供用户选择。它也支持自定义组件样式。
安装和使用 react-highlight.js
react-highlight.js 是一个 NPM 包，可以通过以下方式安装和使用：
安装
npm install react-highlight.js --save
引入
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- --------------------
----- ---- - -- -- -
------ -
---------- ----------------------
-
--------- ------ -- -
------ - - --
--
-
------------
-
-
------ ------- ----配置
react-highlight.js 组件提供了多种配置选项，以下是一些常用的配置示例：
<Highlight language="javascript" theme="atom-one-light">
{code}
</Highlight>这里我们选择了 javascript 作为代码块语言，同时选择了 atom-one-light 风格的主题。
自定义主题
在 react-highlight.js 中，你可以自定义自己的 highlight.js 主题。
第一步：创建主题文件
/* my-custom-theme.css */
.hljs {
color: #000;
background-color: #fff;
}
.hljs-string {
color: red;
}第二步：引入自定义主题
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----------- - ---- ---------------------
------ ---------------------------------
------ ------------------------
------------------------------ -
----- -
------ -------
---------------- -------
--
-------------- -
------ ------
--
---
----- --- - -- -- -
------ -
-----
--------------
---------- ------------------------
---------- ------ -- -
------ - - --
---
------------
------
--
--
------ ------- ----总结
react-highlight.js 为我们提供了一种快速、简便的代码高亮方案。它支持多种编程语言和丰富的主题，同时也提供了自定义主题功能，支持快速的代码块高亮需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72c52ea9b7065299ccbbd2