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

 时间:2024-10-12 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 源代码格式化 文字加色 高亮着色 源码
  • 热门搜索
    野木瓜的功效与作用 花胶的功效与作用及食用方法 欣赏的意思 a是什么意思 开卷有益的意思 公积金是什么意思 什么是教育技术 农村种植什么最赚钱 镇定自若的意思 梦到老鼠是什么意思