ITs

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

[IT] Introduction to Microservices, Docker and Kubernetes

[IT] 在 GitHub Pages 中渲染 KaTex 公式