使用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/
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的更多相关文章
- 使用Scribefire在博客中插入语法高亮
效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...
- 如何在博客中插入jsfiddle的代码
1.进入官网:https://jsfiddle.net/ 可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等: 2.将html.css.js分别写在指定的位置当中,最后一个框result是 ...
- 手把手教你在CSDN博客中插入图片之剑走偏锋系列
1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...
- Hexo博客中插入 Chart 动态图表
该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...
- hexo博客如何插入图片
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...
- 带图片的word快速插入到博客中
最近在博客中写文章的时候,最烦的就是将word文档整体传到博客中,不能一次把图片粘贴上去,再次去添加图片的时候要截图还要找对位置才可上传,偶尔的机会在网上看到有人这么处理,挺好用的,这里我也做个备注. ...
- 怎样将word中的图片插入到CSDN博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- scribefire 多博客管理利器 安装详解
scribefire 多博客管理利器 安装详解 一.ScribeFire介绍 ScribeFire 是 Firefox (火狐浏览器)上著名的博客写作工具,目前已跨平台支持多浏览器(Firefox,C ...
- 在博客中显示图片_Mac版
主要是防止自己忘掉 为了解决一开始自己想在写入的博客中添加本地图片,直接链接的话在自己的电脑倒是可以显示图片,但是在别人的电脑上就没办法加载图片了,问各路大神也没人愿意解答,百度也没有想要的答案,只好 ...
随机推荐
- 超实用Java快捷键
超实用Java快捷键 Ctrl+1或F2快速修复 Ctrl+D快捷删除行 Shift+Enter 快速切换到下一行,在本行的任何位置都可 Ctrl+F11快速运行代码 Alt+上下键 快速移动行(可多 ...
- composer安装及使用说明和相关原理文档
一.安装composer: 1.官方安装方法见https://getcomposer.org/download/ 2.本人安装方法: ①先配好yum源(不会配置的见博客如何制作自己的yum源),我 ...
- .NET面试题系列[18] - 多线程同步(1)
多线程:线程同步 同步基本概念 多个线程同时访问共享资源时,线程同步用于防止数据损坏或发生无法预知的结果.对于仅仅是读取或者多个线程不可能同时接触到数据的情况,则完全不需要进行同步. 线程同步通常是使 ...
- Scala基础 - 下划线使用指南
下划线这个符号几乎贯穿了任何一本Scala编程书籍,并且在不同的场景下具有不同的含义,绕晕了不少初学者.正因如此,下划线这个特殊符号无形中增加Scala的入门难度.本文希望帮助初学者踏平这个小山坡. ...
- 如何选择版本控制系统之二---Git的研发应用场
之前写了一篇<如何选择版本控制系统 ---为什么选择Git版本控制系统>,地址是:http://www.cnblogs.com/goldenfish/p/6876864.html,有兴趣的 ...
- javaWeb学习总结(11)- 监听器(Listener)学习(2)
一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...
- css重构之旅
css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基 ...
- hdu4417
hdu4417 题意 给定一个数列,每次查询一个区间,和一个值h,问区间内有多少个数小于等于h. 分析 二分数的个数,划分树求解判断是否满足条件,划分树求解的是第k小的数,那么前面k个数肯定不大于这个 ...
- Java文件流应用:剪切文件
剪切的实际操作是: 第一步,先复制文件到指定位置, 第二步,删除原文件,这样就实现了剪切 与复制文件相比,多了一步删除文件 注意:删除文件必须在流关闭后,才能删除,否则,删除不了. 实例代码 pack ...
- JavaSE教程-03Java中分支语句与四种进制转换-练习
练习1: 老师如果带100或以上则请客吃饭 import java.util.Scanner; public class Test2{ public static void main(String[] ...