对于前端开发者来说，代码高亮的工具非常重要，可以让代码在页面上更加易于阅读和理解。而在 React 项目中，我们可以使用 npm 包 react-prismjs 来实现代码高亮的功能。
安装
首先，我们需要安装 react-prismjs 和它的依赖——prismjs：
npm install react-prismjs prismjs
使用方法
安装完成后，可以在我们的 React 组件中引入 react-prismjs，然后在需要高亮的代码块上使用 PrismCode 组件即可。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ----------------
------ ---------------------------
------ --------------
----- ---- - --------- ------ -- -
------ - - --
---
-------- --------- -
------ -
-----
---------- --------------------------------------------------
------
--
-上面的代码中，我们首先从 react-prismjs 中引入了 PrismCode 组件，然后在需要高亮的代码块上使用该组件，并传入需要高亮的代码和对应的语言类型（这里是 javascript）。最后，我们在样式表中引入了 PrismJS 的默认样式。
支持的语言类型
react-prismjs 支持众多的代码语言和框架，包括 JavaScript、HTML、CSS、React、Vue、Angular 等等。具体支持的语言和框架可以在 PrismJS 官网 中找到。
如果需要添加一种新的语言或框架，可以在 prismjs 中添加对应的语言包，然后在 react-prismjs 中引入即可。例如，如果需要支持 TypeScript，我们可以先安装 prism-typescript：
npm install prism-typescript
然后在需要高亮的代码块上使用 PrismCode 组件并传入对应的语言类型即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ----------------
------ ---------------------------
------ -------------------
------ --------------
----- ---- - --------- -------------- ------- -
------------------- - - ------
---
-------- --------- -
------ -
-----
---------- --------------------------------------------------
------
--
-指导意义
使用 react-prismjs 可以使我们的代码块更加易于阅读和理解，同时也可以使代码更加美观。在实际开发中，大多数前端框架和库都支持 react-prismjs，例如 React、Vue、Angular 等等。
除了使用 react-prismjs，我们还可以使用其他的代码高亮工具，例如 highlight.js 和 codemirror 等等。不同的工具适用于不同的场景，需要根据具体的需求进行选择。
总之，代码高亮是前端开发中非常重要的一个环节，我们需要根据项目需求选择适合自己的工具，使代码更加易于阅读和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a18