linux centos下安装wordpress客户端 ScribeFire 并添加代码高亮功能

系统环境：centos 6.5

因为服务器上都是红帽，所以本机就选择了centos。红帽系列的linux确实够保守，需要什么软件都要自己动手。

习惯了用客户端写博客，在linux下如果回到网页的方式已经不能忍受，这几天博客没有更新跟折腾这个客户端有很大的关系。

下面详细说说我现在正在使用的wordpress客户端ScribeFire，它的安装配置以及如何修改它添加我们程序猿必须的代码高亮功能。

为什么选择ScribeFire，请看这里 Linux下选择及安装wordpress客户端

ScribeFire严格来说或许并算不上是一个客户端，因为它只是chrome的一个插件，在chrome的应用商店搜索一下就能找到并安装，非常简单，下面说说安装完后的配置。

在安装完打开后，点击Add a New Blog添加博客（目前只有英文），因为ScribeFire并不能像live writer那样自动识别完成配置，所以必须手动指定wordpress的rpc地址，以本博客为例，应该如下图：

点击Finish即可完成配置。ScribeFIre默认会在内容中添加P标签，不需要的可以在插件选项中去掉。

到这里，一般用户就大功告成，可以使用了。但是对于我们程序猿来说，怎么可以没有代码高亮功能呢，必须添加一个。

前面已经说过，博客的代码高亮插件一般都是把我们的代码用<pre>或者<code>标签包围而已，前台在展示时再进行加工，这个各类代码高亮插件都是大同小异的。也就是说我们在写博客时只要切换到HTML代码模式，手动加上效果也是一样的，只不过这样就显得比较麻烦，而且有些样式经过这样切换以后会受到影响而显示不正常，目前我的博客很多文章如果不用客户端直接在wordpress后台打开编辑一下，不用改任何内容保存样式和版面就错乱了。

既然ScribeFIre本身没有提供这个功能，势必要修改源代码了，还好chrome的插件都是一些html、js和css文件，我们完全可以自行修改。

在linux下，chrome的扩展安装目录在用户的.config目录下，以我的用户名liyd为例，我的chrome扩展安装目录为：

/home/liyd/.config/google-chrome/Default/Extensions/

切换到该目录下，用ll命令列出文件列表：

初步一看，傻眼了，chrome是以生成随机目录名称的方式来保存插件的，每个插件都是一个文件夹，我根本不知道我要找的ScribeFire是哪个目录，总不能一个个看过去吧，这也太费力了。当然可以用linux的文件查找命令，但这不并是最好的，因为具体的文件名我们并不清楚，方法终归是有的，请看下图：

我们打开chrome的开发者工具，监控一下ScribeFire的事件，就成功的找到了扩展插件的具体目录。从这里，我们也看到了ScribeFire的富文本框用的是tinymce这个组件。我们接下来添加代码高亮的功能就跟这个有关。

google了一下tinymce，发现这是一款相当强大的富文本框组件，以前怎么就没听说过呢，呵呵。

去它的官网：http://www.tinymce.com 看了一下，API相当的全，但是没有我们本次所需要的功能，一开始看到有个code插件，以为就是添加源代码功能呢，结果一加上，是对整个富文本框显示html源码的，显然不是我们所需，看来是逃不出自己动手了。

大致浏览了一下tinymce的文档，对实现代码高亮功能心中也有个底了，下面来说说这其中的过程。

首先我从API中找到了以下两个方法：

tinyMCE.activeEditor.selection.getContent({format:"text/html"})
tinyMCE.activeEditor.selection.setContent("");

这正是我所需要的，一个获取选中的内容，一个设置选中的内容，

其中 getContent 的format参数指定选中的内容以text方式或者html方式返回。
text方式只获取内容，不包含html标签

html方式获取html内容，包括html标签

我们打开ScribeFire扩展目录下的events.js文件，在它的init方法中添加一个code按钮（具体添加方式请查看tinymce的API），并设置它的点击事件：

editor.addButton('_code', {
    text: 'code',
    icon: false,
    onclick: function() {
    // Alerts the currently selected contents
    }
});

一开始我在点击事件的函数中写入了如下代码，想象中是选中代码内容后，点击按钮用<pre>标签包围：

var _code = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent("<pre>"+_code+"</pre>");

但是实际测试中，在可视化状态下添加代码富文本框也会给内容添加一堆div等的标签，所以无法使用。

后来想到getContent方法可以去掉html标签返回text内容（默认是html），因此把代码改成如下：

var _code = tinyMCE.activeEditor.selection.getContent({format:"text"});
tinyMCE.activeEditor.selection.setContent("<pre>"+_code+"</pre>");

这种方式一般的代码是解决问题了，但是当你添加的是xml的代码是，就会导致杯具，因为它会把所有的标签都去掉，连转码后的也不放过，所以该方法也不完美。

这里我还尝试了用正则表达式的方式来移除自动添加的html标签，当一切都搞定之后杯具的发现用getContent方法获取过内容再设置后，代码缩进的格式会丢失，也就是每一行都会变成顶格对齐了，但是如果直接把代码粘贴到<pre>标签里面则不会有这问题。

因为上面的问题，不能以选中的方式解决，我想到了弹出一个层，类似于iteye的方式，但是遍寻tinymce所有api也没发现有这弹出层的功能，要自己加上也不难，但是这势必会修改较多的代码，导致复杂度增加，最后也放弃了。

在苦苦思索后，终于想到了一种以前似乎在哪里用到过的方式，就是先添加一个<pre>标签，再往里面粘贴内容，测试后证明行的通，最终代码如下，反而更简单了：

editor.addButton('_code', {
    text: 'code',
    icon: false,
    onclick: function() {
    // Alerts the currently selected contents
    tinyMCE.activeEditor.selection.setContent("<pre>codeHere</pre>");
    }
});

但是添加<pre>标签后，在可视化状态下又怎么把代码写入或粘贴到这里面呢？如果切换到html模式这功能又白搞了，再看它的init方法，发现有这一行：

content_css: 'skin/editor_content.css',

这个是设置富文本框里面内容的样式文件，找到该css文件，在里面加入：

pre{
    border: 1px dashed #C1CDC1;
}

给<pre>标签添加一个虚线的边框，大功告成。另外因为博客样式经常用到h1、h2系列标题标签，对scribeFire提供的字体大小设置反而基本不用，因此另外又添加了个设置header的按钮，和h系列标签对应，最终效果如下：

linux centos下安装wordpress客户端 ScribeFire 并添加代码高亮功能

selfly