您现在的位置是:网站首页 > 代码编程 > WEB前端WEB前端

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

不忘初心 不忘初心 2020-09-28 围观() 评论() 点赞() WEB前端

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

今天将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不兼容换行符,导致代码块注释高亮排版错乱

富文本编辑器Highlight.js代码高亮

很赞哦! ()

文章评论

  • 请先说点什么
    人参与,条评论

请使用电脑浏览器访问本页面,使用手机浏览器访问本页面会导致下载文件异常!!!

雨落无影

关注上方公众号,回复关键字【下载】获取下载码

用完即删,每次下载需重新获取下载码

若出现下载不了的情况,请及时联系站长进行解决

站点信息

  • 网站程序:spring + freemarker
  • 主题模板:《今夕何夕》
  • 文章统计:篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们