如何使用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 源代码格式化 文字加色 高亮着色 源码
  • 热门搜索
    杭州千岛湖旅游攻略 南戴河旅游攻略 常州旅游景点大全 阿根廷旅游 端午节旅游 淮安旅游 苏梅岛旅游攻略 临夏旅游 云南旅游网 兰州旅游景点大全