您当前的位置：首页 >  边玩边学  >  帝国cms中使用highlight高亮博客中的代码片段 网站首页 边玩边学

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

发布时间：2017-09-01 12:56:55编辑：透明阅读（）

• 如果我们的博客文章中包含了代码，帝国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，你可以在本页面点击右键 -> 查看源码，找到上面提到的两个文件，然后照葫芦画瓢就行。