PM 說: 怎麼在網頁顯示數學公式 or 化學式?

2024 iThome 鐵人賽

DAY 23

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 23 篇

16th鐵人賽

YUAN

2024-09-20 21:58:47

151 瀏覽

分享至

前言

數學,物理,化學 ...etc 表達式
要怎麼顯示在網頁上呢? 總不可能全部都使用圖片吧

答案是 Latex

Latex 是一個非WYSIWYG(所見即所得)的文字排版系統
格式會長這樣子:

\begin{itemize}
  \item[-] First thing

  \item[+] Second thing
    \begin{itemize}
      \item[Fish] A sub-thing

      \item[Plants] Another sub-thing
    \end{itemize}

  \item[Q] Third thing
\end{itemize}

有時候會遇到單頁行銷網站要放一些數學公式or化學式的需求
所以今天我們來找個套件實現一個 MVP

尋找套件時找到2個:

套件 1 mathjax
- https://github.com/mathjax/MathJax-src
套件 2 katex
- https://github.com/KaTeX/KaTeX

兩個都跑跑看:

mathjax 支援多種輸入語法（如 LaTeX、MathML、AsciiMath）
katex 渲染比較快，故選它當作demo

語法

katex.render("latex語法字串", DOM元素, 設定檔物件);

設定檔文件在這邊

成果

katex_demo

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latex in Web</title>
    <head>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
        integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
        crossorigin="anonymous"
      />
      <script
        src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"
        integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
        crossorigin="anonymous"
      ></script>
    </head>
  </head>
  <body>
    <pre>
以下是 3 個簡單的 LaTeX 語法範例：

### 1. 酸鹼中和化學式
要表示化學式，例如鹽酸（HCl）與氫氧化鈉（NaOH）的酸鹼中和反應，可以使用 `\rightarrow` 來顯示化學反應箭頭：


\text{HCl} + \text{NaOH} \rightarrow \text{NaCl} + \text{H}_2\text{O}

<div
class="my-latex"
data-expr="\text{HCl} + \text{NaOH} \rightarrow \text{NaCl} + \text{H}_2\text{O}"
></div>
### 2. 排列組合
排列 `P(n, r)` 和組合 `C(n, r)` 可以用公式表示如下：

排列：

P(n, r) = \frac{n!}{(n - r)!}

    <div
    class="my-latex"
    data-expr="P(n, r) = \frac{n!}{(n - r)!}"
    ></div>
組合：

C(n, r) = \binom{n}{r} = \frac{n!}{r!(n - r)!}

    <div
    class="my-latex"
    data-expr="C(n, r) = \binom{n}{r} = \frac{n!}{r!(n - r)!}"
    ></div>
### 3. 微積分 積分
簡單的積分語法，例子：從 0 到 1 的定積分：


\int_0^1 x^2 \, dx = \frac{1}{3}

    <div
    class="my-latex"
    data-expr="\int_0^1 x^2 \, dx = \frac{1}{3}"
    ></div>
這些是基本的 LaTeX 語法範例，適用於化學反應式、排列組合和積分的表示。
    </pre>
    <script>
      window.addEventListener("load", function (event) {
        const tex = document.getElementsByClassName("my-latex");
        [...tex].forEach((el) => {
          // getAttribute("data-expr")
          const expr = el.dataset.expr;
          katex.render(expr, el);
        });
      });
    </script>
  </body>
</html>