wordpress中把Kindeditor和Syntaxhighlighter整合在一起

来源：互联网发布：获取json的某个属性编辑：程序博客网时间：2024/06/06 03:49

转载自：http://www.xgezhang.com/kindeditor_syntaxhighlighter.html

在使用wordpress的过程中，使用一些插件能够实现很多自定义的功能，非常方便和美观。比如编辑器插件和语法高亮插件。笔者的博客使用的是Kindeditor编辑器插件和Syntaxhighlighter语法高亮插件，如果有不清楚的读者请戳这里：

用SyntaxHighlighter插件实现代码高亮

编辑器增强插件kindeditor

有了这两个基础之后，我们再开始讨论后面的问题。

在介绍SyntaxHighlighter插件的文章中有介绍到：语法高亮是通过在html里添加类似标签实现的，但在Kindeditor插件中，会自动的加上一些为了美观的html代码，使得高亮代码里的格式变的非常乱，每次都需要到源代码编辑器处进行修改，特别繁琐，于是就在想能不能有更加简单便捷的方法。我们注意到Kindeditor中其实是提供了语法高亮的选项的，如图

里面也内置了常用的代码高亮库，但个人认为它提供的高亮显示非常丑陋，那么我们可不可以通过这个按钮来加载我们Syntaxhighlighter提供的高亮呢。在这之前我们需要搞清楚Syntax高亮的原理。在Syntax文件里我们能够找到一个低版本的测试文件，代码如图：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">      
<head>      
    <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>       
    <title>SyntaxHighlighter Build Test Page</title>      
    <scripttype="text/javascript"src="scripts/shCore.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushBash.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushCpp.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushCSharp.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushCss.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushDelphi.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushDiff.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushGroovy.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushJava.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushJScript.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushPhp.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushPlain.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushPython.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushRuby.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushScala.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushSql.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushVb.js"></script>      
    <scripttype="text/javascript"src="scripts/shBrushXml.js"></script>      
    <linktype="text/css"rel="stylesheet"href="styles/shCore.css"/>      
    <linktype="text/css"rel="stylesheet"href="styles/shThemeDefault.css"/>      
    <scripttype="text/javascript">      
        SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';      
        SyntaxHighlighter.all();      
    </script>      
</head>      
                   
<body>       
<h1>SyntaxHihglighter Test</h1>      
<p>This is a test file to insure that everything is working well.</p>      
                   
<preclass="brush: c-sharp;">      
function test() : String      
{      
    return 10;      
}      
</pre>      
</html>

前面的<script>文件都是加载的不同语言的样式表，中间是调用了某个脚本，执行SyntaxHighlighter.all();之后能够对高亮代码进行渲染显示，这些具体的东西我们不用去了解太多，关键是最后地方的：

?
1
2
3
4
5
6
<preclass="brush: c-sharp;">     
function test() : String     
{     
    return 10;     
}     
</pre>

因此我们知道了，只要在代码前后加上一对类似<pre class=”brush: language”></pre>的标签，再在页面上加载上前面的一大堆js脚本，就可以对代码进行高亮显示了。然后我们又想到，那Kindeditor原始提供的代码高亮是不是也是这样的方法呢？

事实果然如此，我们看看Kindeditor代码高亮的源代码：

?
1
2
3
<preclass="prettyprint php">
    echo "Hello world";
</pre>

这里可以看到，实际上Kindeditor提供的自带的代码高亮也是调用了一个脚prettyprint的样式表文件，那么我们如果能够在点选加入代码之后让系统自动插入Syntaxhighlighter的样式表不就完成任务了吗？我们打开Kindeidtor/plugin/code/code.js文件，找到以下代码段（在大概40.50行的地方，视版本而定）：

?
1
2
3
4
5
6
7
8
click :function(e) {      
           vartype = K('.ke-code-type', dialog.div).val(),      
               code = textarea.val(),      
               cls = type ==='' ? '' :  ' lang-' + type,       
               html ='<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';      
               self.insertHtml(html).hideDialog().focus();      
                    }      
                }

修改为:

?
1
2
3
4
5
6
7
8
click :function(e) {      
          vartype = K('.ke-code-type', dialog.div).val(),      
              code = textarea.val(),      
              cls = type ==='' ? '' :  type,       
              html ='<pre class="brush:' + cls + '">\n' + K.escape(code) + '</pre> ';      
              self.insertHtml(html).hideDialog().focus();      
                    }      
                }

这样我们就完成目标了，接下来的工作就是把上面的一大堆<script>放到需要显示的网页的body之前，这里可以根据需要筛选出一些用不到的脚本语言，提高加载速度。当然这里也不建议大家把这些脚本全部堆到类似于header.php这样的页面中,而是放到需要放置的文件里，必要的时候还可以再写js来判定以下需要加载哪些。（不过其实这些文件全部加起来也不太大，对网站访问速度没有太大影响）

欢迎转载，请注明出处。

0 0