使用Scribefire在博客中插入语法高亮 II

效果如下，

这是我们在Scribefire中添加的code按钮，单击此按钮，则会出现

在codeHere中直接输入代码就可以了。

查看html

可以看到，其中已经添加了<pre>标签。

下面是配置说明：

配置过程参考了这篇文章：linux centos下安装wordpress客户端 ScribeFire 并添加代码高亮功能

一楼留给这位大神

大神说ScribeFire的编辑器是用的tinymce的API，上文是大神分析的结果

所以实际上我们的配置工作就是针对tinymce的API

按照大神的文章，首先

cd ~/.config/google-chrome/Default/Extensions/

在Chrome下面打开Scribefire插件，单击F12，进入开发者模式，然后ctrl+f，查找chrome-extension

后面的一长串字符就对应着Scribefire的存放文件夹，进入这个文件夹

cd elkkomimknapgodalnkjeddkjnjkfmfp/

编辑events.js文件

vim events.js

查找tinyMCE.init，按照图中的指示添加代码

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

为了更加适合博客园的高亮风格，可以做如下设置

editor.addButton(‘_code‘, {
    text: ‘code‘,
    icon: false,
    onclick: function() {
    // Alerts the currently selected contents
    tinyMCE.activeEditor.selection.setContent("<pre class=\"brush:cpp;gutter:true;\">codeHere</pre>");
    }
});

保存，此时重新打开Scribefire就可以看到我们新添加的按钮了。

在编辑视图中，给输入代码添加边框：

在当前文件夹下输入

vim skin/editor_content.css

编辑content.css文件，在文件末尾添加

pre{
    border: 1px dashed #C1CDC1;
}

保存

至此，配置完成！enjoy！