如何在博客中使用SublimeText风格的代码高亮样式
因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式。
虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努力。近来有网友问及如何实现,现分享出来,看完本文后你也可以把自己博客的代码整得漂亮些,让别人看着舒服些了。
方法其实是很麻烦的,即使是写了好几篇博客了对这个过程我已经娴熟了,但其实也还是挻麻烦的。不过谁叫我有是个偏执狂呢,为了让页面漂亮我愿麻烦自己,舒服大家。如果你有更好的方法那当然更好。
安装sublimehighlight
我在博客里应用的样式是SublimeText编辑器里面的主题,这跟我用它来编写代码有关。其实如果ST支持复制为富文本形式的话,事情就要方便得多,直接copy然后paste到word里就把样式带上了,包括缩进,代码高亮等。遗憾的是它不支持。所以出路便是找一个可用的ST插件让它支持富文本复制。
好在ST流行度大,社区活跃,插件众多,还真有款能够完成我需求的插件--n1k0/SublimeHighlight。更详细的关于如何安装的问题等可见它的项目页面。
简单点其实跟安装其他ST插件是一样的,先Ctrl+Shift+P调出control panel,然后输入install package,不用输完,当输入了Install后便出来了,然后回车等待插件列表的显示,这个过程大概有个几秒钟的样子。
然后输入插件名称sublimehighlight,选中并进行安装。如果这一步进行顺利,则跳到下一节。
当你进行到上面一步发现搜不出该插件时,需要手动添加该插件的repo到本地。
具体做法是退出刚才的界面重新输入Ctrl+Shift+P调出control panel,输入add repository 选中并回车。
这时界面下方会出现输入repo地址的地方,将https://github.com/n1k0/SublimeHighlight/tree/python3输入后回车确定。
当提示添加成功后再次进行上面安装插件的步骤来到插件列表,输入sublimehighlight,选中该插件进行安装,如果一切顺利,恭喜你万里长征第一步走完!
设置喜欢的代码样式
安装完成后,可以设置你喜欢的样式,这个样式是你复制出来的样式,跟你在ST里面用的代码样式是没有关系的。也就是说最终复制出来的代码的样式以这个插件的设置为准。
可选的样式可以在插件的GitHub主页看到,下图直接来自其项目页面,图中包括了主题的名称和预览:
设置方法是依次点开preferences=>package settings=>sublimehighlight=>settings - user
会调出一个设置页面,输入喜欢的样式的名字,像下面这样:
当然,还可以指定要使用的字体等其他设置选项,同样,请前往插件主页进行参考。
将代码复制为HTML
像上面那样弄好后,最后一步,就是把代码复制成HTML形式放到博客里去啦!
依次点开edit=>highlight=>convert to html,此命令会将代码转成HTML形式。
之后,在新出来的标签中,请将class为highlight的div直接ctrl+c复制。这一块便是我们需要的东西。
最后,在写博客的时候,以HTML方式编辑博客,将刚才的内容进行粘贴。噢啦!
确定之后的效果:
过程是有点麻烦吧,如果代码量大的话,这个工作将会很恼人。Anyway, 完全看你愿不愿意了。Enjoy!
如何在博客中使用SublimeText风格的代码高亮样式的更多相关文章
- 如何使用SublimeText风格的代码高亮样式 添加Zed Coding(EMMET)插件
因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努 ...
- django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务
上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...
- 借用Snippet插件美化博客中的代码
书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件. 笔者在网上翻阅的时候发现了Snippet ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
- 关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目
关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionTy ...
- 在个人博客中优雅的使用Gitalk评论插件
在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...
- 修复在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”这篇博客中MyScrollView出现滑动一会就不会上下滑动的问题
在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”,这篇博客中的大部分问题已经解决了. 唯一遗憾的是,ViewPage随人能够工作了,但是My ...
- 如何将word中的图片和文字导入自己的博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 怎样将word中的图片插入到CSDN博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
随机推荐
- Sublime Text3安装JsHint
介绍 Sublime Text3使用jshint依赖Nodejs,SublimeLinter和Sublimelinter-jshint. NodeJs的安装省略. 安装SublimeLinter Su ...
- [APUE]UNIX进程的环境(下)
一.共享库 共享库使得可执行文件中不再需要包含常用的库函数,而只需在所有进程都可存取的存储区中保存这种库例程的一个副本.程序第一次执行的时候或第一次调用某个库函数的时候,用动态链接方法将程序与共享库函 ...
- 深入理解JS 执行细节
javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 算法笔记_013:汉诺塔问题(Java递归法和非递归法)
目录 1 问题描述 2 解决方案 2.1 递归法 2.2 非递归法 1 问题描述 Simulate the movement of the Towers of Hanoi Puzzle; Bonus ...
- Web Api 入门实战 (快速入门+工具使用+不依赖IIS)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- Unity 序列化
Script Serialization http://docs.unity3d.com/Manual/script-Serialization.html 自定义序列化及例子: http://docs ...
- PHP之用户验证和标签推荐的简单使用
本篇主要是讲解一些最简单的验证知识 效果图 bookmark_fns.php <?php require_once('output_fns.php'); require_once('db_fns ...
- Create a Team in RHEL7
SOLUTION VERIFIED September 13 2016 KB2620131 Environment Red Hat Enterprise Linux 7 NetworkManager ...
- 树莓派 基于Web的温度计
前言:家里的树莓派吃灰很久,于是拿出来做个室内温度展示也不错. 板子是model b型. 使用Python开发,web框架是flask,温度传感器是ds18b20 1 硬件连接 ds18b20的vcc ...