Kindeditor+highlight實現語法高亮

很多年前寫了一篇文章，也是關于kindeditor語法高亮的，只是那個網站早已不復存在了，并且當時使用的是SyntaxHighlighter這個插件，需要引入的js太多了，有點亂。

今天再用kindeditor，結合highlight來寫一個語法高亮的解決方案，感覺還不錯，至少highlight操作比較簡單，你只需要引入一條js和一條css即可。具體操作如下：

1、修改kindeditor插入代碼功能。

如果你使用的是完整版（kindeditor-all.js或者kindeditor-all-min.js），打開它查找

<pre class="prettyprint'+(h===""?"":" lang-"+h)+'">\n'+b.escape(m)+"</pre>

，把它修改成這樣

<pre><code class="'+h+'">\n'+b.escape(m)+"</code></pre>

如果你使用的不是完整版(kindeditor.js或者kindeditor-min.js)，打開kindeditor插件目錄（plugins），找到code文件夾下的code.js，查找yesBtn，做如下修改

 yesBtn : {
	name : self.lang('yes'),
	click : function(e) {
	var type = K('.ke-code-type', dialog.div).val(),
	code = textarea.val(),
	//cls = type === '' ? '' :  ' lang-' + type,//注釋掉這一句
	//html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';//把這一條修改成下面的樣子
	html = '<pre><code class="' + cls + '">\n' + K.escape(code) + '</code></pre> ';
	if (K.trim(code) === '') {
		alert(lang.pleaseInput);
		textarea[0].focus();
		return;
	}
	self.insertHtml(html).hideDialog().focus();
	}
}

注意修改完成后一定要刷新頁面，部分瀏覽器可能還需要清空一下緩存，否則修改是沒有效果的。

2、下載highlight相關文檔，大家可以自行百度一下，也可以用我這里提供這個：鏈接：http://pan.baidu.com/s/1pKQZdsn 密碼：v6rm

3、在需要語法高亮的頁面嵌入highlight。

<link rel="stylesheet" href="__PUBLIC__/home/js/styles/default.css">
    <!--引入highlight的相關css。highlight官方提供了多套css，大家可以自行修改嘗試-->
    <script type="text/javascript" src="__PUBLIC__/home/js/highlight.pack.js"></script>
    <!--引入highlight的js程序-->
    <script>hljs.initHighlightingOnLoad();</script>
    <!--初始化程序，使之語法高亮-->

注意：你的kindeditor可能把code給過濾掉了，如果是這樣請查看kindeditor代碼過濾。

其實還有一種更簡單的方法，Kindeditor中無需任何設置，只需要導入highlight并在初始化的時候聲明一下高亮模塊即可

<link rel="stylesheet" href="/Template/css/highlight/default.css" />
        <script type="text/javascript" src="/Template/js/highlight.pack.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                document.querySelectorAll('pre').forEach((block) => {
                    hljs.highlightBlock(block);
                });
            });
        </script>

© 致遠 2020-01-30，原創內容，轉載請注明出錯：Kindeditor+highlight實現語法高亮