Hugo博客LaTeX渲染

2019-09-21 约 478 字预计阅读 1 分钟

题记

写博客的时候有时候会需要写公式，我自己的习惯是用Typora进行博客编写，本地上Typora自带latex支持，但是推送到网页的话只能显示latex语法而不会转化成公式，之前本来想要么把公式截图，要么用Chrome插件，但是这样感觉不太友好，所以找了个用来渲染LaTeX的方法.

使用KaTeX对博客LaTeX进行渲染

第一步. 引入KaTeX的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!-- KaTeX -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0-rc.1/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0-rc.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0-rc.1/contrib/auto-render.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
      renderMathInElement(document.body, {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "$", right: "$", display: false}
              ]
          });
    });
</script>

将上面的代码写入html中，我是放在single.html里面的. 需要说明的是上面的代码考虑到了行内公式.

第二步. 测试

样例1

1
2
3


$$
2^2
$$

$$ 2^2 $$

样例2

1
2
3


$$
f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi
$$

$$ f(x)=\int_{-\infty}^\infty\widehat f\xi,e^{2\pi i\xi x},d\xi $$

样例3

1

行内$2^2$行内

行内$2^2$行内

样例4

$$ \frac{\phi \wedge \psi}{\phi} \wedge e_{1} $$

样例5

1
2
3


$$
\begin{aligned} x &=a+b+c \\ &=d+e \\ &=f+g \end{aligned}
$$

$$ \begin{aligned} x &=a+b+c \ &=d+e \ &=f+g \end{aligned} $$

小结

总体来说很方便，但是对换行(样例5)和中文暂时没有找到解决的方法, 不过已经满足绝大多数情况的需要了.

参考资料

Blog养成记(6) Hugo中的LaTeX渲染 https://orianna-zzo.github.io/sci-tech/2018-03/blog%E5%85%BB%E6%88%90%E8%AE%B06-hugo%E4%B8%AD%E7%9A%84latex%E6%B8%B2%E6%9F%93/

使用KaTeX代替MathJax渲染公式 https://www.jianshu.com/p/f2b28954d902

KaTeX官网 https://katex.org/

LaTeX符号表 http://math.ecnu.edu.cn/~latex/docs/others/mathsymb.pdf

目录

Hugo博客LaTeX渲染

题记

使用KaTeX对博客LaTeX进行渲染

第一步. 引入KaTeX的代码

第二步. 测试

样例1

样例2

样例3

样例4

样例5

小结

参考资料