51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
# 解决Hugo数学公式显示
|
||
|
||
## 更新Hugo版本
|
||
|
||
## 添加配置
|
||
|
||
目前发现添加markup.goldmark.extensions会启动服务报错，直接引用Js和CSS文件可以解决问题。
|
||
|
||
```
|
||
// ...existing code...
|
||
[markup.goldmark.extensions.passthrough]
|
||
enable = true
|
||
[markup.goldmark.extensions.passthrough.delimiters]
|
||
[[markup.goldmark.extensions.passthrough.delimiters.block]]
|
||
start = "$$"
|
||
end = "$$"
|
||
[[markup.goldmark.extensions.passthrough.delimiters.inline]]
|
||
start = "$"
|
||
end = "$"
|
||
[markup.goldmark]
|
||
[markup.goldmark.renderer]
|
||
unsafe = true # 允许嵌入 HTML/JS
|
||
// ...existing code...
|
||
```
|
||
|
||
注意事项：
|
||
|
||
1. Goldmark 的 passthrough 只是让 $ 和 $$ 包裹的内容原样输出到 HTML，并不会自动渲染为数学公式。你还需要在主题的模板中引入 MathJax 或 KaTeX 的 JS/CSS 文件，才能让公式在网页上显示为数学公式。
|
||
2. unsafe = true 已经允许 HTML/JS 注入，方便后续引入渲染库。
|
||
|
||
## 引入 MathJax 或 KaTeX
|
||
|
||
在你的主题的 head 或 footer 模板文件中添加 MathJax 或 KaTeX 的 CDN 引用。例如：
|
||
|
||
```html
|
||
<!-- 在 layouts/partials/head.html 或 footer.html 中添加 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
renderMathInElement(document.body, {
|
||
delimiters: [
|
||
{left: "$$", right: "$$", display: true},
|
||
{left: "$", right: "$", display: false}
|
||
]
|
||
});
|
||
});
|
||
</script>
|
||
```
|