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

我觉得光就体积问题，已经不能再用react-syntax-highlighter了，我看看react官方网页，人家代码高亮也没用这些琐碎的

。。我用了react-syntax-highlighter
打包js文件立刻+1M
用不起，太大了，就算
webpack -p
提取css代码单独打包，
nginx Gzip压缩+缓存，打包文件减小到200kb左右
加上七牛cdn文件加速，(后来换成港服VPS)，网速和文件大小已经不是问题了，
就算这样，电脑打开网页还是有0.5s白屏空隙时间，估计是文件还是太大，chrome需要一定时间去计算,微信打开则需要2s时间才能成功渲染页面。
我后来直发现不用react-syntax-highlighter 的 css文件，代码减小200kb size
剩下700kb无论我切换highlight.js包还是react-syntax-highlighter包，体积再也没变过，
我发现这个react-syntax-highlighter打包体积过大的元凶就是highlight.js包本身就很大，
react-syntax-highlighter再在highlight.js的基础上封装成react可以用的包，
嗯嗯，如果要解决体积过大的问题，估计只能看看能不能自己做一个highlight.js了

Answer 4

webstorm大法