MathJax with Jekyll

写在前面的话

我最开始接触在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过来的(在最后面)。

1
2
3
4
5
6
7
8
9
// 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>

或者:

1
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>

其次

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

示例

这是原始LaTeX公式语法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
`Inline公式`       $ \int_a^b f(x)\,dx $ 

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

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

`另起一行居中公式`       $$ 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). $$

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

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

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

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

另起一行居中公式 $$ 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 点击就能放大公式了。

转自Bruce Zhao,有改动,原文链接

文章目录

写在前面的话

在jekyll中调用MathJax JavaScript

首先

其次

示例

炫酷吗