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

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

不忘初心 2020-09-29 围观() 评论() 点赞() 【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>