« 上一篇下一篇 »

为ckeditor增加代码高亮插件——syntaxhighlight配置

ckeditor是一个非常优秀的文本编辑器,遗憾的是,ckeditor默认并不支持代码高亮,而作为一个技术型博客,难免要发些代码,只好手动搞定了。

在查资料时无意间发现了一个ckeditor的代码语法高亮插件,这个插件的高亮实现也是基于syntaxhighlight的,而且做得也很完善了,简单介绍下配置方法吧。(下载地址:http://code.google.com/p/lajox/)


1.将压缩包中的“syntaxhighlight”文件夹解压到ckeditor-for-wordpress/plugins/下。
2.打开ckeditor-for-wordpress/ckeditor.config.js,添加
view sourceprint?
1 config.extraPlugins="syntaxhighlight"; //(注意最后的分号)。

2 //在 config.toolbar之后,按照原有格式添加'syntaxhighlight'

3 //如:

4 config.toolbar =

5 [

6 [ 'Source', '-', 'Bold', 'Italic', 'syntaxhighlight' ]

7 ];
3.修改ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/plugin.js中lang : ['zh-cn'],(如果希望显示英文版则不改变)。
4.在需要显示高亮代码的页面中加入如下代码(比如在外观主题的header文件/wp-content/themes/我的主题/header.php的</head>前加入):
view sourceprint?01 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script>

02 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>

03 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>

04 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>

05 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>

06 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>

07 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>

08 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script>

09 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>

10 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>

11 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>

12 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>

13 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>

14 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script>

15 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushScala.js"></script>

16 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>

17 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushVb.js"></script>

18 <script type="text/javascript" src="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>

19 <link type="text/css" rel="stylesheet" href="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>

20 <link type="text/css" rel="stylesheet" href="/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>

21 <script type="text/javascript">

22 SyntaxHighlighter.config.clipboardSwf = '/wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf';

23 SyntaxHighlighter.all();

24 </script>
 

相关文章:

去除 CKeditor 拼写检查(波浪线)  (2010-7-23 0:29:37)

Leave a Comment

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。