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

523 字 · 1586 阅读 · 2018 年 08 月 19 日

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

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

代码语法高亮

代码语法高亮可以引入 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。

BY-ND 4.0

△