论坛 Forum

Kindeditor中默认的代码高亮插件是prettify，它比较简洁，但是，说实话，却没有SyntaxHighlighter来得实用。本文就一步一步阐述如何将kineditor的prettify替换为SyntaxHighlighter...

• 第一步：更新kindeditor代码高亮写入pre时的类名
• 第二步：下载SyntaxHighlighter插件
• 第三步，在需要的页面引入SyntaxHighlighter

第一步：更新kindeditor代码高亮写入pre时的类名

打开[/kindeditor目录/plugins/code/code.js]，大约在50+行（因kineditor版本的不同有可能不同），找到类似于“html = '<pre class=”这样一行，改为以下的内容：

html = '<pre class="brush:' + type + ';">' + K.escape(code) + '</pre> ';

这样，就将原来的“class=prettify lagn-type”换为SyntaxHighlighter插件需要的类名；

第二步：下载SyntaxHighlighter插件

下载完SyntaxHighlighter的插件后，你会发现有两个基本文件和一大堆语言的语法分析js文件，一次性要加载这么多文章，要发起10+个请求链接。对此，我建议对它们进行合并。这里，我提供一个合并后的版本：

syntaxhighlighter压缩版本

在线版本：http://pjiaxu.com/theme/default/plus/sh/sh.js

在这个版本中，我做了一个优化并让它自动运行起来，在需要的页面引入相应的javascript文件和css文件就可以了，不需要再加任何的javascript代码，我所作的SyntaxHighlighter更改如下：

var self = document.getElementsByTagName('script');
self = self[self.length-1];
var src = self.src;
var root = src.indexOf('/') !== -1 ? src.substr(0, src.lastIndexOf('/'))+'/' : '';
SyntaxHighlighter.defaults['tab-size'] = 2;
SyntaxHighlighter.config.clipboardSwf = root+'clipboard.swf';
SyntaxHighlighter.all('pre');
delete self;
delete root;
delete src;

这里主要做了两件事：

1. 获取脚本所在的目录，引入clipboard.swf——支持跨平台复制文件
2. 自动高亮所有的pre元素

其实，还可以再做另一件事，那就是自动加载css文件，但是，我不清楚大家喜欢哪个主题，就没有自动去加载了，自己可以加载或费点功夫引入一个css文件了。

第三步，在需要的页面引入SyntaxHighlighter

分别需求引入两个文件，一个是javascript，另一个是css

<script type="text/javascript" src="sh.js">
<link rel="stylesheet" href="sh.css">

我提供的压缩包里有一个index.html文件，可以查看源码是如何写的。

原文链接 ：http://pjiaxu.com/js/7.html

不错的分享，支持一下。

按照你的方法不起作用，是为什么？

在code.js中修改这个变为

html = '<pre class="brush:' + type + ';">' + K.escape(code) + '</pre> ';

 

这条语句说实话改了相当于没改