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

 时间:2025-10-23 17:32:08

1、首先,使用npm add react-syntax-highlighter命令在项目中添加该程序包。

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

2、接着,打开package.json,就可以看到添加的react-syntax-highlighter以及版本。

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

3、在项目中,需要使用该组件的地方,使用如图命令导入Prism和需要的样式。然后就可以使用如图代码使用了。

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

4、在网页上的显示效果如图所示,可以看到设定Prism的language属性为json后,代码按照json高亮了。

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

5、也可以引入其它的样式,若干支持的样式如图所示,其中还有atomDark。

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

6、如图是切换另一个样式之后,json内容的代码高亮效果。

如何使用react syntax highlighter组件高亮代码
  • 如何设计vue动态路由导航
  • el-steps设置内容居中显示
  • nginx-windows版本的下载与使用
  • 如何导出无版本控制信息的项目:svn
  • 简易 SQL 源代码格式化 文字加色 高亮着色 源码
  • 热门搜索
    领结婚证需要带什么 车震是什么意思 3是什么意思 幸福是什么 t是什么单位 69什么意思 og是什么意思 三不伤害是指什么 涟漪是什么意思 鼠和什么生肖最配