如何使用react syntax highlighter组件高亮代码

本文讲解在React项目中通过React Syntax Highlighter组件实现代码高亮的方法，安装该组件后即可快速集成并展示美观的高亮代码。

1、 通过运行 npm add react-syntax-highlighter 命令，将该组件包安装到项目中，完成依赖的引入与配置。

2、 打开package.json文件，即可查看新增的react-syntax-highlighter及其对应版本信息。

3、 在项目中需使用该组件时，通过所示命令导入Prism及相关样式，随后即可按照图示代码进行调用和使用。

4、 网页显示效果，当设置Prism的language属性为json时，代码内容已按JSON格式实现语法高亮。

5、 可引入多种支持的样式，所示，其中包括atomDark等选项。

6、 切换样式后，JSON内容的代码高亮效果所示。

7、 首先，在项目中运行 npm add react-syntax-highlighter 命令，以安装该依赖包。