帝国cms中使用highlight高亮博客中的代码片段

如果我们的博客文章中包含了代码，帝国cms默认是不做处理的，也就是说：代码片段和普通的文字内容么有区别。  如果直接修改 Ghost 系统的话，每次系统升级都会很麻烦；那么，我们只好在页面上解决这个问题了，也就是在模板中增加语法高亮的支持，我下边介绍的方法很简单，语法高亮插件采用 highlight.js 。

1、highlight.js介绍

highlight支持176 种编程语言的语法解析；拥有自动检测编程语言的能力；同时为多种编程语言代码高亮；可以在 node.js 平台上运行；支持各种标签；可以与任何 js 框架兼容

官网https://highlightjs.org

2、highlight.js使用方法

接下来就看看怎么用 hightlight.js 吧！ 引入 highlight.js 文件 我们需要在页面中同时引入一个 js 文件和一个 css 文件，你可以在官网上下载highlight.js（但是我们还是省点儿力气，直接使用 Bootstrap中文网 提供的 CDN 链接，既简单又提升加载速度，至少官网上下载的9.12.0版本使用时抛出了异常）。只需要引入两个文件：

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css"rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 

第一个文件是样式文件，我们采用 sublime 编辑器类似的样式，第二个文件是 highlight.js 的核心文件，就是它解析代码的。

添加这两个文件的时候，我们还是按老规矩，将 CSS 文件添加到 中，将 js 文件添加到页面底部。

另外还需要在highlight.js下边增加依据脚本初始化的代码：

<script> hljs.initHighlightingOnLoad();</script> 

3、代码书写方法

highlight.js高亮代码时会自动寻找 < pre><code></code></pre > 并把代码块高亮。

所以在书写的时候需要按照下边的格式：

< pre>
 	<code>
		...
 		你要高亮的代码块
 		...
 	</code>
 </pre > 

注：本页的代码高亮就是使用的highlight.js，你可以在本页面点击右键 -> 查看源码，找到上面提到的两个文件，然后照葫芦画瓢就行。