用 highlight.js 为文章中的代码添加语法高亮

时间：2022-04-25 12:15:02

来源：http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/

-------------------------------------------------------------------------------------

如果我们的文章中包含了代码，Ghost 默认是不做处理的，也就是说：没有为代码增加语法高亮。

其实，这个问题可以从 Ghost 系统入手解决，可惜现在 Ghost 还不支持插件，如果直接修改 Ghost 系统的话，每次系统升级都会很麻烦；那么，我们只好在页面上解决这个问题了，也就是为主题（theme）增加语法高亮的支持，在这里，我们以 Ghost 的默认主题（theme）-- Casper -- 为例，语法高亮插件采用 highlight.js 。

先来看看 highlight.js 有什么能力吧：

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

OK，接下来就看看怎么用 hightlight.js 吧！

引入 highlight.js 文件

我们需要在页面中同时引入一个 js 文件和一个 css 文件（在这里我们省点儿力气，直接使用 Bootstrap中文网 提供的 CDN 链接，既简单又提升加载速度）：

<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 文件添加到 <head> 中，将 js 文件添加到页面底部 </body> 标签前面，这样就完成了 highlight.js 的引入。

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

让代码高亮吧

前面的准备工作做完了，现在还有最后一步，就是：调用 hihglight.js 解析代码，完成高亮工作。

在 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 标签下面加入如下代码：

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

这样，highlight.js 就会自动寻找 < pre><code></code></pre > 代码块并完成代码高亮了！

书写 markdown 时的注意事项

对于大段的代码建议采用 gfm 格式，如下：

    ```

    这里放代码

    ```

highlight.js 可以自动识代码所用的编程语言，但是，电脑不如人脑啊！识别错误的几率很高，所以，为了安全起见，最好标识一下所用的编程语言，例如：

    ```html

    <DOCTYPE html>

    <html>

    </html>

    ```

前面说过，highlight.js 支持 71 种编程语言（完整列表看这里），既包括常见的 C、java、javascript、ruby、python、html、css等，还支持 apache、nginx 这些配置文件的语法，所以，在你书写这些代码的时候，可以看看 highlight.js 是否支持所用的语法，然后标注对应的语言，让 highlight.js 完美的对其高亮显示吧。

特别提醒

本页面中的代码高亮就是上面的方式哦，直接开启浏览器的调试工具研究吧！

相关文章