hugo文章支持数学公式
使用hugo建立了个人博客(shenlb.me)之后,在整理文章的时候,发现需要嵌入数学公式。还好,Hugo 0.122版本以后,原生支持数学公式渲染,不再像以前需要修改很多地方才可以渲染数学公式。
配置之前确保你使用的Hugo版本高于 0.122。
第一步:修改配置文件
我的Hugo配置文件采用了yaml格式,所以需要修改 config.yaml 文件。添加goldmark的扩展功能,位于markup → goldmark → extensions里的内容。我的goldmark里启用了unsafe,所以内容是这样的。
markup:goldmark:renderer:unsafe: trueextensions:passthrough:delimiters:block:- - $$- $$inline:- - $- $enable: true
第二步:选择数学公式渲染引擎
Hugo支持两种渲染引擎:MathJax和KaTeX。MathJax支持的数学公式更全面,兼容性更好,但加载速度比KaTeX要慢一点。另外,KaTeX在使用内嵌符号(行内公式)$…$渲染公式的时候可能出现错误。
我已经习惯了$…$的内嵌公式(行内公式),所以我选择了MathJax。
需要在模板主题里增加一个文件,因为我使用PaperMod主题,文件名就是:
d:\slb-blog\themes\PaperMod\layouts\partials\math.html
内容如下:
"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>MathJax = {tex: {displayMath: [['$$', '$$']], // 多行公式inlineMath: [['$', '$']] // 内嵌公式}};
</script>
第三步:修改baseof文件
需要修改的文件名是:
d:\slb-blog\themes\PaperMod\layouts_default\baseof.html
在<head> … </head>块里增加3行内容,我的文件内容是这样的:
<head>{{- partial "head.html" . }}{{ if .Param "math" }}{{ partialCached "math.html" . }}{{ end }}
</head>
第4步:在文章中添加数学公式
首先要在文件头里 front matter (头部信息)里增加一行“math = true”的信息,下面是我的费马大定理这篇文章中的头部信息内容:
+++
title = "《费马大定理》"
date = 2023-09-27T08:37:00+08:00
draft = false
author = "申龙斌"
summary = "从勾股定理,到椭圆曲线,一部辉煌壮丽的数学史诗。"
tags = ["费马"]
categories = ["读书"]
url = "/fermat"
math = true
+++
行内公式(内嵌公式)
使用单个美元符号 $...$
来包裹公式,例如:
这是一个行内公式:$E = mc^2$
。
渲染结果: E = m c 2 E = mc^2 E=mc2。
多行公式
使用双美元符号 $$...$$
来包裹公式,公式将单独占一行显示。
例如:
欧拉公式:
$$ e^{i\pi} + 1 = 0 $$
柯西积分公式
$$ f(a) = \frac{1}{2\pi i} \oint_{\gamma} \frac{f(z)}{z-a} dz $$
渲染效果:
e i π + 1 = 0 e^{i\pi} + 1 = 0 eiπ+1=0
f ( a ) = 1 2 π i ∮ γ f ( z ) z − a d z f(a) = \frac{1}{2\pi i} \oint_{\gamma} \frac{f(z)}{z-a} dz f(a)=2πi1∮γz−af(z)dz
渲染效果
我写的带数学公式的文章:
- 《费马大定理》
- LDM地震数据体存储格式分析与应用
参考来源
https://gohugo.io/content-management/mathematics/
https://www.yoghurtlee.com/hugo-math-rendering/