如何在博客中使用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形式。

之后,在新出来的标签中,请将classhighlight的div直接ctrl+c复制。这一块便是我们需要的东西。

最后,在写博客的时候,以HTML方式编辑博客,将刚才的内容进行粘贴。噢啦!

确定之后的效果:

过程是有点麻烦吧,如果代码量大的话,这个工作将会很恼人。Anyway, 完全看你愿不愿意了。Enjoy!

目录
相关文章
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1266 0
SublimeText配置Markdown编辑及预览
本文详细介绍了如何配置Sublime Text及相关插件,使之成为Markdown编辑器并且能够在浏览器中实现预览功能。
Hugo教程#3单页面布局
上集我们学习了如何创建一个index的布局,那么是不是所有的页面都要创建一个布局,那肯定不是的,那样的话实在太麻烦,因为只显对应页面的markdown里面的内容,所以创建一个single.html布局就可以了,所有的页面都可以使用这个布局
86 0
|
前端开发
Dreamweaver如何使用CSS?
Dreamweaver如何使用CSS?
253 0
|
数据可视化
Markdown编辑器与富文本编辑器的区别
首先,要搞清楚一点,markdown 编辑器与传统的富文本编辑器实际上一点区别都没有!只是可能由于某些原因放到了一个概念,那么是一个什么概念呢?
285 0
markdown语法续
markdown语法续
94 0
|
自然语言处理 前端开发 JavaScript
开发一个 vscode 插件,提升 markdown 排版可读性🌿
开发一个 vscode 插件,提升 markdown 排版可读性🌿
455 0
|
前端开发 机器人 程序员
关于写作编辑器markdown与它的编辑工具,我想说...
markdown便是如此,它让你无需关注排版,将更多的经历用于写作上。如果现在还没有使用过它的朋友,真的推荐你们跨出第一步...
238 0
|
程序员
sublime3 风格推荐设置
sublime3 风格推荐设置
101 0
|
小程序 前端开发 JavaScript
小程序文章样式之代码高亮
小程序文章样式之代码高亮
527 0
小程序文章样式之代码高亮