首页   >   代码编程   >   WEB前端

Highlight.js不兼容换行符,导致代码块注释高亮排版错乱

今天将Highlight.js升级到了10.2.0,在集成到wangEditor中去的时候,发现只要碰到有注释的地方,不管是什么编程语言,都会出现高亮部分的排版错乱情况,但是我把需要高亮的代码单独拿出来,写了一个html做测试,它又不会出问题了,所以,我猜测可能是需要高亮的代码有问题。

Highlight.js不兼容换行符,导致代码块注释高亮排版错乱

如上图,从第四行注释开始,后面的内容全部变成了注释,进一步猜测,是否没有对换行做处理,导致后面的代码没能被识别,从而都被当成了注释

为了验证我这个猜想,我在wangEditor的_insertCode方法中打了一个log,然后将代码拷贝出来,放到我自己做测试的那个html文件中去(截图的代码太长了,我选了一个短一点儿的代码块打印)。

<!doctype html>
<html>
<head>
<title>hljs</title>
<link rel="stylesheet" type="text/css" href="styles/github.css">
<script type="text/javascript" src="highlight.pack.js"></script>
</head>
<body>
<div class="test">
<!-- 高亮排版有问题的代码块 -->
<pre>
<code class="hljs javascript">
// 插入代码<br/>_insertCode: function _insertCode(value) {<br/> var editor = this.editor;<br/> editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p><br></p>');<br/>}
</code>
</pre>
<!-- 我直接拷贝的原始代码块 -->
<pre>
<code class="hljs javascript">
// 插入代码
_insertCode: function _insertCode(value) {
var editor = this.editor;
editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p>>br></p>');
}
</code>
</pre>
<!-- 高亮排版没问题的代码块 -->
<pre>
<code class="hljs javascript">
// 插入代码
<br/>_insertCode: function _insertCode(value) {
<br/>var editor = this.editor;
<br/>editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p>>br></p>');
<br/>}
</code>
</pre>
</div>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
</body>
</html>

上述代码,我做了三种展示,注释都写的很清楚了,所以我就不再逐一描述了,直接运行看下效果。

Highlight.js不兼容换行符,导致代码块注释高亮排版错乱

从这个效果图上,已经可以很好的印证出我们上面的猜测了,就是换行出了问题

第一种是经过wangEditor做了处理的内容,将换行符替换成了<br/>标签,并且去掉了\r\n换行符;

第二种是我直接从IDE中拷贝出来的代码块,直接就带有\r\n这种换行符;

第三种比较特殊,有了<br/>之后,又敲了一个回车,也就是说最终也带有\r\n换行符;

从上面的情况,我们可以总结出,<br/>标签并不好使,而只要带了\r\n这种换行符的,就不会有问题,可是我要如何让它识别出<br/>标签来作为换行符呢?

我又去highlight的官网溜达了一圈,结果在点来点去的过程中,让我发现了一件事,其实人家早就给出了解决方案,只不过我自己眼瞎没看到,在它的usage中,有如下一段描述:

Highlight.js不兼容换行符,导致代码块注释高亮排版错乱

只需要一句代码就搞定了

hljs.configure({useBR: true});

效果如下:

Highlight.js不兼容换行符,导致代码块注释高亮排版错乱

雨落无影

QQ群Ⅰ: 686430774 (已满)

QQ群Ⅱ: 718410762

QQ群Ⅲ: 638620451 (已满)

QQ群Ⅳ: 474195684

QQ群Ⅴ: 463034360 (已满)

QQ群Ⅵ: 879266502

QQ群Ⅶ: 627786015 (已满)

工作5分钟,吹逼2小时: 855525339 (娱乐消遣,广告狗勿进)

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2020-09-29

永久地址:https://www.jiweichengzhu.com/article/58fba0804d514d96881c2d0cdfe58bd3

评论