开启CodeColorer可视化输入功能

本篇文章受到http://www.coderblog.in/2010/09/use-codecolorer-visual-insert-code-feature.html启发。

CodeColorer是Wordpress下的一个很不错的代码高亮插件，默认支持很多种程序语言。

官方提供的调用方法为在编辑时在代码的两端插入[cc lang="语言类型"]和[/cc]标签，功能很强大，但是还有不足。

其一就是由于WP原版的编辑器比较蛋疼，代码中的缩进在粘贴过来的时候会被自动删去；另外一个就是在遇到代码中的一些蛋疼的特殊符号时会被自动转换，比如 > 这个符号，总会被显示成>，很让我头疼。

今天在网上看到了开头写的那篇文章，发现原来codecolorer的作者是留了一些高级功能的，只是不知道为什么没有启用（或许是还在beta版？但也很久没有更新了）。经过一段时间的试用，并没有发现什么问题，而且功能及其强大。

启用方法：

修改Wordpress目录下的wp-content/plugins/codecolorer/里的codecolorer.php

找到以下几行：

1
2
3
4
// if (get_user_option('rich_editing') == 'true') {

//   add_filter('mce_external_plugins', array('CodeColorerLoader', 'AddTinyMCEPlugin'));

//   add_filter('mce_buttons', array('CodeColorerLoader', 'RegisterTinyMCEButton'));

// }

去掉前面的注释，保存即可开启这强大的功能了。
其实在这几行之前我们可以看到有如下两行注释：

1
2
      // TinyMCE

      // temporarily disabled

作者还是给我们留下了一些悬念啊。
修改完成后：

在编辑器里可以看到一个CODE字样的按钮了，就我们的codecolorer功能的按钮。

点开以后就是这样的，其中language可以选择很多种语言，下面会上图，也可以在OR后面输入例如bash之类的并没有在下拉菜单中提供的语言。下面第二个inline的复选框则是可以使<?php echo("一段代码")?>被内嵌在文章内部，而不是成为单独的一片。剩下的不用多说了。

支持的多种语言

一些其他选项。
使用这个工具可以正常插入带有缩进的代码。
在使用了这个功能之后我发现代码的两端的标签变成了[cce]和[/cce]之类的样子，另外加上语言选项之后会变成类似[cce_php]之类的样子，与官方说明有所不同。而inline模式则是使用[ccei]这个标签；强制带行号模式是使用[ccen]标签。同时经过测试，以前的[cce lang="语言名称"]形式也可以正常工作。
看来[cce]这个标签是[cc]标签的加强版，加了一个e以后，包括特殊符号在内的很多问题都解决了，大快人心。