react.js - react代码高亮

问题描述

问 题

使用了react-syntax-highlighter插件，要使代码高亮必须要指定language吗？因为发现不指定也可以高亮。但是高亮的内容有点乱。

还有怎么才能在网页上展示diff文件？
要求能够对增加删除的代码有高亮背景展示。效果如下:

我在代码中指定language＝diff，这时候页面上显示的代码完全没有高亮。代码如下:

效果如下:

请大神指教！

解决方案

使用了react-syntax-highlighter插件，要使代码高亮必须要指定language吗？

我查了一下这套件，它是包装highlight.js的，我有用过这个库，hightlight本身有不指定时的自动侦测功能，没记错应该是以匹配到的关键字来作相关比对，满简单的这种。除了你在标记上指定语言外，如果要用自动侦测，应该要用一下highlight的自订配置 - configure(options)，可以设定只限使用某几种语言，以免胡乱匹配，因为它支持的高亮度的语言很多。

还有怎么才能在网页上展示diff文件？

1. diff文件是要由diff工具产生的那种格式才行。

2. 你要确定套件有把也要把要用的对应的语言注册上来。

这是highlight的演示页面，里面有diff文件高亮度显示的样子。不过好像与你要的撷图有些差异。highlight对diff文档匹配的代码也很简单，你可以看看。

这篇关于react.js - react代码高亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！