Ghost 博客支持代码语法高亮及 LaTeX 公式

Ghost 博客默认是不支持代码语法高亮及 LaTeX 公式的,不过需要增加这两项功能也十分简单。首先,你可以直接修改主题文件,而今天介绍的方法则是合理利用 Ghost 提供的代码注入功能。

通过 Ghost 后台可以很容易找到 Code injection 选项,通过该功能可以快速向模版中引入 CSS 样式文件或 JS 脚本。

Mosaic-Capture-2018-08-19-at-20.01.50

代码语法高亮

代码语法高亮可以引入 highlight.js 获得。highlight.js 支持常见编程语言的语法高亮,并提供了多种样式。

首先,你需要在模版头部引入 CSS 样式文件,样式可以在 highlight.js 官网选择。特别地,这里推荐使用 cdnjs 提供的 CDN 链接加载 CSS。

<!-- monokai-sublime 主题样式-->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/
                             ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css"
/>

接下来,在页面尾部引入 JS 脚本。

<!-- 渲染 JS-->
<script src="https://cdnjs.cloudflare.com/
             ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<!-- 自动识别代码块-->
<script>
  hljs.initHighlightingOnLoad();
</script>

现在,只需要在书写 Markdown 文本时添加相应代码语言的名称即可,highlight.js 即可自动完成语法高亮。

LaTeX 公式

当文章中存在公式时,我们一般会使用 LaTeX 语法书写。此时,就可以使用 MathJax 完成公式渲染。

同样,你只需要在模版尾部引入 MathJax 的 JS 即可。

<script
  type="text/javascript"
  async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
>
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [["$", "$"]],
          processEscapes: true
      }
  });
</script>

现在,只需要在书写 Markdown 文本时通过 $$ 引用公式,即可自动完成渲染。例如:

$$\frac{d}{dx}e^{ax}=a,e^{ax}$$

Code injection 是 Ghost 非常灵活的功能,上文只是抛砖引玉。当然,我更喜欢简单地书写,除非迫不得已,也不会在模版中引入太多第三方 JS。