wordpress代码高亮编辑器ck-and-syntaxhighlighter

发布于九月 14, 2010

前段时间，曾写过一篇文章，名为《WordPress编辑器加代码高亮功能》使用的是 CKeditor for wordpress 编辑器插件，与 Syntax Highlighter and Code Prettifier Plugin for WordPress 代码高亮插件，并在编辑器中加入插入代码按钮，实现直接使用可视化编辑器来输入代码，并使代码高亮。

但是上面的实现的方法有点麻烦，但是不会在 HTML 源码编辑模式出现过多的隐藏代码。

今天介绍一个的插件为 ck-and-syntaxhighlighter ，此插件把 ckeditor、ckfinder 与 SyntaxHighlighter 三者结合，让你的 wordpress 编辑器直接带有代码高亮功能，SyntaxHighlighter把你的代码渲染的就像Eclipse和DreamWeaver中一样多彩、直观，你在后台几乎可以设置它们所有的功能。

ck-and-syntaxhighlighter 刚装上的时候，是没有按钮的，必需到后台设置相应的选项才行。如下图的编辑器选项

可以看到，后台可用编辑器按钮，还有设置前端评论是否使用编辑器按钮。

全部可用按钮有如下功能， insertcode 按钮为插入代码功能

['Source','Save','NewPage','Preview','Templates','Cut','Copy','Paste','PasteText','PasteFromWord','Print','SpellChecker','Scayt','Undo','Redo','Replace','SelectAll','Find'],['PageBreak','RemoveFormat','Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField','Bold','Italic','Underline','Subscript','Superscript','NumberedList','BulletedList','Strike'],['Outdent','Indent','Blockquote','CreateDiv','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Link','Unlink','Anchor','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','TextColor','BGColor']['Styles','Format','Font','FontSize','Maximize','ShowBlocks','About','insertcode']

献上我所使用的按钮功能，如果你有能力，也可以自己折腾这些按钮

['Source','Cut','Copy','Paste','PasteText','PasteFromWord','SpellChecker','Scayt','Undo','Redo','Find','Replace','SelectAll','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],['Bold','Italic','Underline','Strike','Subscript','Superscript','NumberedList','BulletedList','Outdent','Indent','Blockquote','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Link','Unlink','Anchor'],['Format','Font','FontSize','TextColor','BGColor','RemoveFormat','Maximize','ShowBlocks','insertcode','MediaEmbed']

上图，看看按钮排版

安装方法：

1、在wordpress后台插件添加，搜索 ck-and-syntaxhighlighter 安装即可。

2、到如下网址下载插件包在 wordpress 后台上传安装即可
http://wordpress.org/extend/plugins/ck-and-syntaxhighlighter/
注：如使用之后，未发现高亮的，请检查设置中“亮皮肤设置”的各种风格之后，再进行代码插入工作。

[ 39 条评论 ]

{ 发表评论? }

BoKeam 九月 14, 2010 at 9:20 上午 #

后台的功能加强?不过好像是在编辑功能上　

回复
- jiechic 九月 14, 2010 at 9:21 上午 #
  
  后台编辑器功能强，前台也可调用编辑器，设定按钮即可，最主要的是集合了代码高亮，值得技术员使用。
  
  回复
- 三叶草九月 14, 2010 at 4:58 下午 #
  
  这孩子，又沙发了！
  
  回复
ubuntusoft 九月 14, 2010 at 1:07 下午 #

好像不错的样子

回复
- jiechic 九月 14, 2010 at 1:09 下午 #
  
  是不错，不过还是在本地测试过再用，感觉有些不兼容之类的吧，我试用过，有时候和某些主题不搭。我现在用前面文章介绍的方法实现高亮的。
  
  回复
freetstar 九月 14, 2010 at 2:46 下午 #

用的是另外一个插件，待我去体验下你说的这个，娃哈哈

回复
- jiechic 九月 14, 2010 at 2:51 下午 #
  
  最好先别直接使用，测试过之后会好些，有些要设置生效，才对后面的日志成立的。
  
  回复
哲哲九月 14, 2010 at 11:07 下午 #

一直没有注意到网站代码的高亮问题··

回复
- jiechic 九月 15, 2010 at 5:41 下午 #
  
  有时候需要，所以还是得弄一下。嘿嘿。
  
  回复
  - 哲哲九月 23, 2010 at 2:07 下午 #
    
    嗯嗯·也对··
    
    回复
痛风的症状九月 16, 2010 at 4:54 上午 #

做个友情链接可以吗？痛风论坛www.tongfengkx.com

回复
- jiechic 九月 16, 2010 at 4:20 下午 #
  
  不了，由于属于技术博，所以只想与博客交换和IT互联网等技术类型的网站交换链接。不好意思。
  
  回复
通智广告九月 18, 2010 at 9:59 下午 #

再过3天就是中秋节了，我在这里祝福您和您的家人中秋节快乐！

回复
黄江二手车九月 19, 2010 at 3:03 上午 #

看不懂技术,只能祝你中秋快乐了,嘿嘿~

回复
哲哲九月 19, 2010 at 12:30 下午 #

一直都没有在意博客代码高亮的问题··因为很少加进来代码·

回复
签名九月 19, 2010 at 8:29 下午 #

学习一下呵呵

回复
陶瓷刀九月 19, 2010 at 11:39 下午 #

中秋国庆快乐啊！

回复
云淡风清九月 20, 2010 at 3:51 下午 #

用Zblog的飘过

回复
学夫子九月 20, 2010 at 11:16 下午 #

wp就是很强大的也，不过后面改为emlog啦，

回复
- jiechic 九月 20, 2010 at 11:45 下午 #
  
  感觉最近很多人换emlog
  
  回复
三叶草九月 22, 2010 at 10:49 下午 #

哥们，中秋快乐～最近事情多，现在特地来报道个～

回复
- jiechic 九月 22, 2010 at 11:49 下午 #
  
  嘿嘿，最近发现静不下心来做事，没学到什么东西，没没更新什么，正烦恼呢。
  
  回复
美女论坛九月 23, 2010 at 12:20 下午 #

这样的博客程序不错，研究研究，以后有机会自己也搞个，O(∩_∩)O

回复
卢松松九月 23, 2010 at 1:55 下午 #

这样的高亮就像word里的错别字

回复
门聚合九月 24, 2010 at 3:27 下午 #

评论: 61 | 引用: 0 | 浏览: 90我都怀疑会不会评论要比浏览还高了~哈哈！

回复
- jiechic 九月 24, 2010 at 5:49 下午 #
  
  ……..都是订阅的多。呵呵。
  
  回复
simple 九月 26, 2010 at 2:40 下午 #

CK and SyntaxHighlighter，安装后日志撰写窗口什么也不显示，我的WP3.0.1版本，是不是不支持。我单独装CK就用的很好，请大虾解决下。

回复
- jiechic 九月 26, 2010 at 3:14 下午 #
  
  你去设置里面，没有设置按键，所以没有显示，你看一下那个编辑器设置里面，有放按键的设置。
  
  回复
programath 十二月 9, 2010 at 2:25 上午 #

爱死这个插件了，[face:26]

回复
- jiechic 十二月 9, 2010 at 9:17 上午 #
  
  呵呵，我没用这个。
  
  回复
排行榜八月 9, 2011 at 8:45 上午 #

博主，这个插件用了一段时间，感觉很不错。最近发现一个问题，就是上传图片后，提示服务器错误，请问下怎么回事啊，我用默认模板上传就很正常。

回复
- jiechic 八月 9, 2011 at 9:05 上午 #
  
  可能这个editer没有安装ckfinder 插件，这个插件是用来处理附件的。而且上传的附件，不会显示在媒体中，不会产生post id
  
  回复
排行榜八月 9, 2011 at 9:08 上午 #

那有好的解决办法吗，我在使用这个插件的时候是需要同时上传图片的，要是有个完美集成的就好了。

回复
- jiechic 八月 9, 2011 at 9:10 上午 #
  
  http://www.jiechic.com/archives/wordpress-editor-and-highlight-the-button-to-update-the-code.html
  你试试这个吧，是我自己集成的。好像挺久没更新了，不知道官方什么版本了。
  
  回复
- jiechic 八月 9, 2011 at 9:12 上午 #
  
  刚看了，官方更新1.0.9了
  
  回复
排行榜八月 9, 2011 at 9:17 上午 #

哦，那博主能否也更新一下，我是最新WP3.2.1版本，不知道能不能用上。

回复
- jiechic 八月 9, 2011 at 9:19 上午 #
  
  这个，，不定时更新，最近上班忙，都没空弄。。不好意思哦。你先搭个测试环境去用一下试试看吧。
  
  回复
折翼的PHP小超人十二月 11, 2011 at 8:38 下午 #

这款插件还是蛮不错的，如果能把加载的高亮CSS样式提到 head前使其符合W3C标准就更好了。

另外，博主此文的地址很个性啊！呵呵！

回复
- jiechic 十二月 11, 2011 at 11:34 下午 #
  
  我已经不用这款插件了。此文的地址，只能告诉你，这是乱码了。
  
  回复