MathJax with Jekyll

在jekyll中使用MathJax生成漂亮公式

Posted by Bruce Zhao on January 7, 2016

Estimated reading time: 9 minutes. {Jekyll} [MathJax]

写在前面的话

我最开始接触在html中写$$LaTeX$$公式是在使用Rmarkdown的时候,因为Rmarkdown只需要knit一下就能将markdown生成html。特别是公式只需要在公式两端加上$公式$(inline) $$ 公式 $$(equation)就能生成公式,特别对学统计学的小赵来说,特别的方便(在熟练的LaTeX公式的情况下),再也不用word公式编辑器里面去拖拉拽了。

自从接触了jekyll以后,就疯狂的爱上了这个工具,渐渐的Rmarkdown用的少了。现在使用Rmarkdown主要就是生成PDF和beamer报告用,以及帮帮研究僧同学调一调PDF格式用于提交作业。

之所以弃用Rmarkdown生成html的原因是不会调里面的CSS布局,以及增加手机阅读的适配性(现在几乎都是手机阅读,所以手机端的阅读体验是第一位)。而jekyll结合了bootstrap后,简直炫酷到不行,关键是有很多大牛的写好的现成的模板,Chorme -> F12 就能扒到css和版式。或者直接找到对应的github repository fork下来或者干脆download Zip,你就拥有了别人的博客了。多扒几个,研究研究就能融会贯通了,然后做成你想要的博客模板。

感觉说了很多废话啊,还没有进入主题,可能是太久没有写一点东西了(还欠着2015年的总结啊,多少人盼望着…),最近一直忙着改版博客,现在已经是第五次改版了重要满意了。

在jekyll中调用MathJax JavaScript

在jekyll中调用$$MathJax$$ https://www.mathjax.org 的JavaScript就能实现LaTeX公式渲染。我测试的markdown渲染工具是kramdown,Github Flavored Markdown。

首先

你需要将一段script加入到_layout/post.html 里面。我是不会告诉你这段代码是从knited的html里面copy过来的(在最后面)。


// mathjax 
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

其次

需要说明的是这里引发渲染的与Rmarkdown里面的略有区别:$公式$在这个里面是不能用的; $$ 公式 $$ 在Rmarkdown里面是居中的公式,而在这里是Inline公式;这里的居中另起一行的是 \\[ 公式 \\];也可以用 \\( 公式 \\)来实现Inline公式。

示例

这是原始LaTeX公式语法:

$$ \int_a^b f(x)\,dx $$ #Inline公式

\\[\int_0^{+\infty} x^n e^{-x} \,dx = n! \\]  另起一行居中公式

\\( p\{X=x\}=f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}} \\)  Inline公式

\\[ p\{X=x\}=f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}} \\]  另起一行居中公式

$$ F(x) = P\{ X <= x \} = \int_{-\infty}^x f(x)\,dx $$

\\[ f(x,y,z) = 3y^2 z \left( 3 + \frac{7x+5}{1 + y^2} \right). \\]

这是对应生成的公式样子:

$$ \int_a^b f(x),dx $$ #Inline公式

\[\int_0^{+\infty} x^n e^{-x} ,dx = n! \] #另起一行居中公式

\( p{X=x}=f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}} \) #Inline公式

\[ p{X=x}=f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}} \] #另起一行居中公式

$$ F(x) = P{ X <= x } = \int_{-\infty}^x f(x)dx $$

\[ f(x,y,z) = 3y^2 z \left( 3 + \frac{7x+5}{1 + y^2} \right). \]

炫酷吗 右键选择 Math Settings -> zoom trigger -> click 点击就能放大公式了。

最后

欢迎大家在下面的多说评论框拍砖以及分享,支持各种主流社交账号登陆。虽然界面相比之前的disqus丑了一点,但是毕竟在国内,你懂的。想知道disqus的界面的同学请点击 这里