在前端开发中，代码高亮功能是一个非常基础且必备的功能。而 react-syntax-highlighter 是一个强大的 JavaScript 库，可以帮助我们实现语法高亮的效果。本文将详细介绍如何使用这个 npm 包来实现代码高亮。
安装
使用 npm 来安装 react-syntax-highlighter：
npm install react-syntax-highlighter
使用示例
首先，在你的 React 组件中引入所需的语言风格和组件：
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
其中，Prism 是 react-syntax-highlighter 中提供的一种语法高亮器，atomDark 则是一种预定义的颜色主题。当然，你也可以选择其他的语法高亮器和颜色主题。
接下来，在你的组件中使用 SyntaxHighlighter，并传递需要高亮的代码串和相应的语言类型：
<SyntaxHighlighter language="javascript" style={atomDark}> {`function helloWorld() { console.log('Hello, world!'); }`} </SyntaxHighlighter>
上述代码将会渲染出一段高亮了语法的 JavaScript 代码，颜色主题为 atomDark。
自定义语言风格
react-syntax-highlighter 提供了预定义的语言风格，但你也可以自定义语言风格以达到更好的视觉效果。下面是一个示例代码：
-- -------------------- ---- ------- ------ - ----- -- ----------------- - ---- --------------------------- ------ -------- ---- ------------- -------- ----------------------------- --------- -------- -- - ------ - ------------------ ------------------- ----------------- ---------- -------------------- -- - ------ ------- ----------------------------展开代码
在上述代码中，我们使用了从 ./nightOwl.js 文件中导入的自定义颜色主题。CustomizedSyntaxHighlighter 组件接收 language 和 children 属性，其中 language 表示需要高亮的语言类型，而 children 则表示需要高亮的代码串。
结语
通过使用 react-syntax-highlighter，我们可以轻松地实现代码高亮功能。当然，我们也可以根据自己的需求来自定义语言风格，以达到更好的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43226
