转载自:http://www.xgezhang.com/kindeditor_syntaxhighlighter.html
在使用wordpress的过程中,使用一些插件能够实现很多自定义的功能,非常方便和美观。比如编辑器插件和语法高亮插件。笔者的博客使用的是Kindeditor编辑器插件和Syntaxhighlighter语法高亮插件,如果有不清楚的读者请戳这里:
有了这两个基础之后,我们再开始讨论后面的问题。
在介绍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
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
title
>SyntaxHighlighter Build Test Page</
title
>
<
script
type
=
"text/javascript"
src
=
"scripts/shCore.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushBash.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushCpp.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushCSharp.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushCss.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushDelphi.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushDiff.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushGroovy.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushJava.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushJScript.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushPhp.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushPlain.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushPython.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushRuby.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushScala.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushSql.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushVb.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"scripts/shBrushXml.js"
></
script
>
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"styles/shCore.css"
/>
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"styles/shThemeDefault.css"
/>
<
script
type
=
"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
>
<
pre
class
=
"brush: c-sharp;"
>
function test() : String
{
return 10;
}
</
pre
>
</
html
>
|
前面的<script>文件都是加载的不同语言的样式表,中间是调用了某个脚本,执行SyntaxHighlighter.all();之后能够对高亮代码进行渲染显示,这些具体的东西我们不用去了解太多,关键是最后地方的:
1
2
3
4
5
6
|
<
pre
class
=
"brush: c-sharp;"
>
function test() : String
{
return 10;
}
</
pre
>
|
因此我们知道了,只要在代码前后加上一对类似<pre class=”brush: language”></pre>的标签,再在页面上加载上前面的一大堆js脚本,就可以对代码进行高亮显示了。然后我们又想到,那Kindeditor原始提供的代码高亮是不是也是这样的方法呢?
事实果然如此,我们看看Kindeditor代码高亮的源代码:
1
2
3
|
<
pre
class
=
"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) {
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> '
;
self.insertHtml(html).hideDialog().focus();
}
}
|
修改为:
1
2
3
4
5
6
7
8
|
click :
function
(e) {
var
type = 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来判定以下需要加载哪些。(不过其实这些文件全部加起来也不太大,对网站访问速度没有太大影响)
欢迎转载,请注明出处。