Ghost博客默认的使用的是markdown编辑器,是没有高亮代码显示,所以在阅读一些比较长代码段落时是很痛苦的,如果是在PC或者MAC平台上会有Sublime Text这个软件程序可以让代码高亮显示,所以不管作为前端还是后端人员来说都会按照这个软件,实际上网页上也可以达到这样的代码高亮效果,用到的是highlight.js插件来实现的。

首先让我们看一下highlight.js 的官方文档示例,里边高亮的样式和语言有很多种,可以根据自己的偏好给代码上色。

highlightjs官网

引入 highlight.js 文件

我们需要在页面中同时引入一个 js 文件和一个 css 文件,这里使用的是跟Sublime Text一样的代码高亮样式 monokai-sublime.min.css ,分别放在后台的Code injection中Site Header和Site Footer两个部分中,具体的代码如下:

 /* 放在后台Code injection中Site Header部分中代码 */ 
<link href="//cdn.bootcss.com/highlight.js/9.15.8/styles/monokai-sublime.min.css" rel="stylesheet">  

 /* 放在后台Code injection中Site Footer部分中代码 */ 
<script src="//cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>  
<script >hljs.initHighlightingOnLoad();</script>  

Before

After

更多的样式和应用

更多的样式和应用要访问 highlight.js demo来查看,使用时请查阅官方的使用手册