0. 前言

  • 以往寫筆記通常是使用 Notion，簡單的 Markdown 語法搭配支援 LaTex，使得在撰寫學習筆記時，可以達到快速且美觀的呈現。
  • 雖說 GitHub Pages 支援了 Markdown 的語法，但卻不支援 LaTex，這使得想將筆記從 Notion 移轉到 GitHub Pages，成為一個小缺點。
  • 而此處介紹的是在網頁上顯示較為輕便的 KaTex。

1. 解決方法

  • 利用 KaTex，在靜態頁面掛載 JavaScript 程式碼。
  • 其在官網的描述是：

Beautilful math in all browsers A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

Step 1. 創建一個可常駐的靜態頁面

  • 在 \layouts\partials\ 下創建一個叫作 math.html 的頁面。
    • 注意是 global 的 layouts 文件夾中不是 hugo themes 中的文件夾
  • 開啟頁面之後，在 <head> 與 </head> 之間加入下一步驟內的 JavaScript 程式碼。

Step 2. 將 JavaScript 程式碼貼入 math.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css" integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js" integrity="sha384-GxNFqL3r9uRJQhR+47eDxuPoNE7yLftQM8LcxzgS4HT73tp970WS/wV5p8UzCOmb" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>
  • 上面的程式碼是將 KaTex 的渲染程式碼寫到 math.html 中。

Step 3. 將 Hugo theme 中的 header.html 複製出來

  • 同樣將 header.html 複製到 global 下的 \layout\partials，並貼入
{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
{{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
{{- /* Head custom content area end */ -}}
  • 上面的程式碼的功能將 math.html 嵌進 header.html 中，並以 config.yml 中的 .param.math 指令來控制。

Step 4. 開始撰寫 KaTex

  • 一開始先將標頭的定義區將 math: true，即可開啟該頁面的 KaTex 渲染功能。
  • 在 \\( 符號與 \\) 符號間進行 inline equation 插入。
  • 或在 $ $ 符號與 $ $ 間進行 block equation 的插入。
  • LaTex 的語法可以參考https://www.cs.pu.edu.tw/~wckuo/doc/latex123/node11.html

參考來源：