如何在 Blogger 中完美數學公式 (MathJax) 與程式碼高亮 (Highlight.js)
之前寫文章時，遇到公式或是程式，我向來都是隨便貼，但最近覺得好像可以用一些方式寫漂亮一點，而且現在還有 AI 協助做這件事。所以這篇文章就來看如何在 Blogger 的主題設定中加入 MathJax 與 Highlight.js，並提供完整的實作範例。
步驟一：修改主題 Header 區塊
請進入 Blogger 後台的「主題」>「編輯 HTML」，在 <head> 內加入以下設定代碼（此處已進行 HTML 轉義，確保範例不被直接執行）：
<!-- MathJax 3 數學公式設定 -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true
}
};
</script>
<script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'/>
<!-- Highlight.js 程式碼高亮設定 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'></script>
<script>hljs.highlightAll();</script>
<!-- 自定義 CSS 微調 -->
<style>
pre code {
border-radius: 8px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
padding: 1.5em !important;
line-height: 1.5;
}
</style>
實作示範對照區
以下展示了如何在 HTML 編輯器中撰寫（原始碼）以及瀏覽器最終算出的呈現結果：
範例 1：顯示 LaTeX 原始碼而不被公式化
如果您想在內文顯示這段字 $a^2 + b^2 = c^2$ 而不讓它變成渲染後的公式，您可以按以下 HTML 撰寫：
<code>$a^2 + b^2 = c^2$</code>
範例 2：分段函數 (Cases)
原始 HTML 寫法：
$$|x| = \begin{cases}x & \text{if } x \geq 0 \\ -x & \text{if } x < 0\end{cases}$$
渲染呈現結果：
$$|x| = \begin{cases}x & \text{if } x \geq 0 \\ -x & \text{if } x < 0\end{cases}$$範例 3：多行推導對齊 (Aligned)
原始 HTML 寫法：
$$\begin{aligned}(a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2\end{aligned}$$
渲染呈現結果：
$$\begin{aligned}(a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2\end{aligned}$$範例 4：數學表格 (Array)
原始 HTML 寫法：
$$\begin{array}{|c|c|}\hline\text{角度} \theta & \sin(\theta) \\ \hline 0^\circ & 0 \\ 30^\circ & \frac{1}{2} \\ 45^\circ & \frac{\sqrt{2}}{2} \\ \hline\end{array}$$
渲染呈現結果：
$$\begin{array}{|c|c|}\hline\text{角度} \theta & \sin(\theta) \\ \hline 0^\circ & 0 \\ 30^\circ & \frac{1}{2} \\ 45^\circ & \frac{\sqrt{2}}{2} \\ \hline\end{array}$$範例 5：Python 程式碼區塊
原始 HTML 寫法：
<pre><code class="language-python">
def hello_world():
print("Hello Blogger!")
</code></pre>
實際高亮呈現：
def hello_world():
print("Hello Blogger!")
總結
透過以上的「原始碼 vs 算後結果」對照，只要在 HTML 中正確使用 <pre><code> 標籤並對必要的 HTML 符號進行轉義，就能在撰寫文章時達成效果
