react代码高亮

Question

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

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

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

效果如下:

请大神指教！

Answer 1

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

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

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

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

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

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

Answer 2

非常感谢@eyesofkids的回答，对我的帮助非常大。我的代码不能展示diff文件的原因是我选择的style不好，造成了对diff文件的显示看不出来。style换成agate就能十分明显的看到文件的改变了

Answer 3

webstorm大法