效果如下,

这是我们在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/
cd 4.3.5_0/    //对应的版本号

编辑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!

使用Scribefire在博客中插入语法高亮 II的更多相关文章

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

    效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...

  2. 如何在博客中插入jsfiddle的代码

    1.进入官网:https://jsfiddle.net/ 可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等: 2.将html.css.js分别写在指定的位置当中,最后一个框result是 ...

  3. 手把手教你在CSDN博客中插入图片之剑走偏锋系列

    1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...

  4. Hexo博客中插入 Chart 动态图表

    该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...

  5. hexo博客如何插入图片

    Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...

  6. 带图片的word快速插入到博客中

    最近在博客中写文章的时候,最烦的就是将word文档整体传到博客中,不能一次把图片粘贴上去,再次去添加图片的时候要截图还要找对位置才可上传,偶尔的机会在网上看到有人这么处理,挺好用的,这里我也做个备注. ...

  7. 怎样将word中的图片插入到CSDN博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  8. scribefire 多博客管理利器 安装详解

    scribefire 多博客管理利器 安装详解 一.ScribeFire介绍 ScribeFire 是 Firefox (火狐浏览器)上著名的博客写作工具,目前已跨平台支持多浏览器(Firefox,C ...

  9. 在博客中显示图片_Mac版

    主要是防止自己忘掉 为了解决一开始自己想在写入的博客中添加本地图片,直接链接的话在自己的电脑倒是可以显示图片,但是在别人的电脑上就没办法加载图片了,问各路大神也没人愿意解答,百度也没有想要的答案,只好 ...

随机推荐

  1. 超实用Java快捷键

    超实用Java快捷键 Ctrl+1或F2快速修复 Ctrl+D快捷删除行 Shift+Enter 快速切换到下一行,在本行的任何位置都可 Ctrl+F11快速运行代码 Alt+上下键 快速移动行(可多 ...

  2. composer安装及使用说明和相关原理文档

    一.安装composer: 1.官方安装方法见https://getcomposer.org/download/   2.本人安装方法: ①先配好yum源(不会配置的见博客如何制作自己的yum源),我 ...

  3. .NET面试题系列[18] - 多线程同步(1)

    多线程:线程同步 同步基本概念 多个线程同时访问共享资源时,线程同步用于防止数据损坏或发生无法预知的结果.对于仅仅是读取或者多个线程不可能同时接触到数据的情况,则完全不需要进行同步. 线程同步通常是使 ...

  4. Scala基础 - 下划线使用指南

    下划线这个符号几乎贯穿了任何一本Scala编程书籍,并且在不同的场景下具有不同的含义,绕晕了不少初学者.正因如此,下划线这个特殊符号无形中增加Scala的入门难度.本文希望帮助初学者踏平这个小山坡. ...

  5. 如何选择版本控制系统之二---Git的研发应用场

    之前写了一篇<如何选择版本控制系统 ---为什么选择Git版本控制系统>,地址是:http://www.cnblogs.com/goldenfish/p/6876864.html,有兴趣的 ...

  6. javaWeb学习总结(11)- 监听器(Listener)学习(2)

    一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...

  7. css重构之旅

    css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基 ...

  8. hdu4417

    hdu4417 题意 给定一个数列,每次查询一个区间,和一个值h,问区间内有多少个数小于等于h. 分析 二分数的个数,划分树求解判断是否满足条件,划分树求解的是第k小的数,那么前面k个数肯定不大于这个 ...

  9. Java文件流应用:剪切文件

    剪切的实际操作是: 第一步,先复制文件到指定位置, 第二步,删除原文件,这样就实现了剪切 与复制文件相比,多了一步删除文件 注意:删除文件必须在流关闭后,才能删除,否则,删除不了. 实例代码 pack ...

  10. JavaSE教程-03Java中分支语句与四种进制转换-练习

    练习1: 老师如果带100或以上则请客吃饭 import java.util.Scanner; public class Test2{ public static void main(String[] ...