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

时间:2023-01-16 12:01:39

效果如下,

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

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

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

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

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

查看html

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

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

下面是配置说明:

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

一楼留给这位大神

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

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

按照大神的文章,首先

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

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

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

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

cd elkkomimknapgodalnkjeddkjnjkfmfp/
cd 4.3.5_0/    //对应的版本号

编辑events.js文件

vim events.js

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

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

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!