在Ghost中启用Highligh.js和Mathjax

Ghost默认是没有代码高亮的,更不要说Latex数学印刷排版公式的嵌入了。

前一段时间有朋友说我现在的代码块没有高亮,看起来不舒服,于是乎我才开始重视这个问题!另外,由于我本身的专业是密码学,难免要和数学公式打交道,所以在这里一并加入了MathJax。

在Ghost博客主题中控制显示内容的入口文件是default.hbs,该文件可以在

<GHOST_PATH>/content/themes/<YOUR_THEME>/default.hbs

中找到,下面所说的两个修改都是在这一文件内完成的。

Highlight.js

Haighlight.js 是一个自动代码高亮的小脚本,使用起来也非常简单。

  • body之前嵌入Highlight的样式表:
1
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
  • body结尾处嵌入javascript脚本:
1
2
3
4
5
6
7
8
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

如此一来,博客中的代码区块就动被渲染上颜色了。

MathJax

MathJax是在网页上渲染Latex数学公式和符号的脚本,最终可以得到印刷版显示质量的数学公式,需要的人可以自行添加。

其显示效果是这样子的 $Y_j = 4 \sum_{i=0}^N X_i$ ,不过存在一个问题,就是“_”符号在网页中代表着重符号,所以需要将上面的公式输入成下面的格式

$Y\_j=4\sum\_{i=0}^N X\_i$

这个插件的应用方法和上面差不多。

  • body结尾处添加如下区块:
    1
    2
    3
    4
    5
    6
    7
    {{! Mathjax configuration}}
    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
    });
    </script>

完成上面的步骤之后,重新载入Ghost后台就可以看到实际效果了!