当前位置: 首页 > news >正文

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 e+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γzaf(z)dz

渲染效果

我写的带数学公式的文章:

  • 《费马大定理》
  • LDM地震数据体存储格式分析与应用

参考来源

https://gohugo.io/content-management/mathematics/
https://www.yoghurtlee.com/hugo-math-rendering/


http://www.mrgr.cn/news/77949.html

相关文章:

  • MySQL学习入门
  • 实例讲解Simulink的模型引用Model模块
  • 信息安全设计第11周预习报告
  • 鸿蒙进阶篇-状态管理之@Prop@Link
  • centos7 安装helm v3
  • CSS回顾-CSS选择器详解
  • oracle 12c查看执行过的sql及当前正在执行的sql
  • 【计算机网络】多路转接之select
  • 新华三嵌入式面试题及参考答案
  • 海信Java后端开发面试题及参考答案
  • 第三十九篇 ShuffleNet V1、V2模型解析
  • Optional类
  • Leetcode 51 N Queens
  • 高频面试题(含笔试高频算法整理)基本总结回顾16
  • pinia的使用
  • 【c++篇】掌握动态内存的奥妙
  • Modern Effective C++ item 15:尽可能的使用constexpr
  • 活着就好20241125
  • 禁用达梦DEM的agent
  • 大数取模 详解
  • 【数据库原理】创建与维护表,DDL数据定义语言
  • Java项目实战II基于SpringBoot的教学资料管理系统(开发文档+数据库+源码)
  • 交叉熵 vs focal loss
  • 探索 Python 任务自动化的新境界:Invoke 库揭秘
  • AJAX请求返回报错NET::ERR_CERT_DATE_INVALID
  • 内网渗透横向移动1