在Hexo中插入數學公式並顯示

發表於 更新於 分類於

此篇介紹如何透過Mathjax套件
使得能在hexo NexT能在hexo 下使用數學公式
只不過數學公式其他寫法等我有空時再來寫
(我有點懶應該會拖很久才補齊或者沒補齊(?))

不過這篇主要是給我自己做個紀錄筆記用的

安裝MathJax相關套件

首先，解除安裝原有的渲染器 hexo-renderer-marked

1
2
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc

然後，在電腦上安裝 pandoc

接者，修改 next 主题配置
找到mathjax下的enable設定為true

1
2
3
4
5
6
7
8
9
10
11
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

參數說明

per_page

true 或者 false，預設為 true 這個選項是控制是否在每篇文章都使用到pandoc顯示數學公式
當設為 false 時，它就會在每個頁面都載入 MathJax
因為Mathjax載入會影響文章載入的速度，所以當沒有使用數學公式的頁面時，建議關閉。
預設(true) 是只對 Front-matter 中含有 mathjax: true 的文章進行顯示數學公式。
如果 Front-matter 中不含有 mathjax: true，或者 mathjax: false，那麼 NexT 將不會對這些文章使用到該套件。
例如：

1
2
3
4
5
6
<!-- 這篇文章會顯示數學公式式 -->
---
title: 'Will Render Math'
mathjax: true
---
...
1
2
3
4
5
6
<!-- 這篇文章不會顯示數學公式式 -->
---
title: 'Not Render Math'
mathjax: false
---
....
1
2
3
4
5
<!-- 這篇文章不會顯示數學公式式 -->
---
title: 'Not Render Math Either'
---
....

參考資料: https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/MATH.md