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
參考來源：