使用Markdown輸出LaTex數學公式

李東bbsky發表於2019-03-16
現在大資料、人工智慧、資料分析等很多技術崗位都對數學有一定的要求,數學越來越重要,很多人也開始嘗試學習數學,腦子裡突然就有了結合Python程式設計來學習數學的想法。在網路上搜尋了很多相關資料,看到非常多不錯的嘗試,但是國內在這方面的資料卻比較少,於是就想到開一個技術專欄。

實踐出一整套便於網際網路傳播分享的數學公式跨平臺編輯、跨環境顯示是非常有必要的,如果還是停留在Word或PDF時代,那數學就會被限制在文件或圖片裡而無法通過最流行的網頁方式進行傳播,而且Word、PDF等檔案處理軟體裡的數學公式編輯既麻煩,而且最重要的是與程式設計脫節。

數學公式的編輯與顯示

要將學習心得(尤其是數學公式等)寫成文件在知乎、簡書、微信公眾號以及網站的網頁上面展示出來,使用Markdown以及LaTex Math的結合我認為是最佳的方法。

與LaTex文件的比較
雖然很多數學學術論文整個文件就像使用Markdown一樣是直接使用的LaTex語法來編輯的,但是仔細比對之後發現直接用LaTex語法來寫整個文件來,它的效果和Markdown + LaTex Math 方式沒有太大的區別。
但是LaTex的語法、編輯器、配置、中文支援等都要比Markdown要複雜的多,而且也不及Markdown已經非常成熟的生態(包括工具鏈、社群等)。

編輯器與外掛
Markdown的編輯器非常多,對於很多初學者來說,個人比較推薦使用VS Code。

  • 一是VS Code漢化比較方便,想讓更多人學會使用Python來學數學,有一箇中文介面還是比較重要的;而且VS Code是跨平臺的,Mac、Windows都可以上手;
  • 二是VS Code是一款極為優秀的程式碼編輯器,說起優秀,應該算是目前最為推薦的編輯器之一(可能沒有之一);要用Python學數學,就不能用純Markdown軟體,程式碼編輯器是少不了的,使用VS Code編譯Python和Markdown都極為舒適;
  • 三是VS Code外掛豐富,Python的編譯、Markdown的編寫與預覽、LaTex Math的顯示等工具鏈相當完備。比如Python外掛,只需要安裝外掛集合Python Extension Pack,裡面就包含了微軟官方外掛Python、MagicPython、Jupyter等優秀外掛;而Markdown外掛,推薦安裝Markdown All in One,以及Markdown+Math。

LaTex Math的語法

LaTex Math的語法多且雜,我們是沒法完全記住這些語法的,能記住也不提倡吧,我連Markdown語法都沒能全記住。查詢手冊在手,天下我有,這裡比較推薦名校萊斯Rice大學的一個語法手冊,萊斯大學LaTex Math線上PDF手冊

當然安裝了上述外掛的VS Code也是有LaTex Math語法提示的。用英文字元反斜槓就可以為你提示。下面我們就結合這個PDF裡LaTex Math的語法在Markdown裡面進行實戰,以及對這些語法的使用進行一些簡單的講解。

希臘字母
使用$LaTex希臘字母語法$,也就是將LaTex的希臘字母語法用兩個美元符號圍住即可。比如以下案例:

$\Gamma$、$\iota$、$\sigma$、$\phi$、$\upsilon$、$\Pi$、$\Bbbk$、$\heartsuit$、$\int$、$\oint$

輸出的結果就是這樣子啦~
$\Gamma$、$\iota$、$\sigma$、$\phi$、$\upsilon$、$\Pi$、$\Bbbk$、$\heartsuit$、$\int$、$\oint$

值得注意的是希臘字母有大寫和小寫之分,這個大小寫是由LaTex的首字母是否大小寫來控制的。

三角函式、對數、指數
三角函式、對數、指數的寫法以及其他符號的語法和字母是一樣的,也是使用$LaTex符號$,也就是將LaTex的希臘字母語法用兩個美元符號圍住即可,我們來看下面的案例:

$\tan$、$\sin$、$\cos$、$\lg$、$\arcsin$、$\arctan$、$\min$、$\max$、$\exp$、$\log$

輸出的結果如下:
$\tan$、$\sin$、$\cos$、$\lg$、$\arcsin$、$\arctan$、$\min$、$\max$、$\exp$、$\log$

運算子
運算子的寫法也是如此,不過要注意的是加號、減號、等於號、大於、小於的寫法有點不同,是直接用符號即可,這個要注意一下。

$+$、$-$、$=$、$>$、$<$、$\times$、$\div$、$\equiv$、$\leq$、$\geq$、$\neq$  

輸出的結果就是:
$+$、$-$、$=$、$>$、$<$、$\times$、$\div$、$\equiv$、$\leq$、$\geq$、$\neq$

集合符號
集合是高中數學就會學習的知識,也是非常重要的基礎概念,集合的符號也比較多,所以會特地把它們單獨列出來,雖然它們的語法和上面沒有區別。

$\cup$、$\cap$、$\in$、$\notin$、$\ni$、$\subset$、$\subseteq$、$\supset$、$\supseteq$、$\infty$

輸出的結果就是:
$\cup$、$\cap$、$\in$、$\notin$、$\ni$、$\subset$、$\subseteq$、$\supset$、$\supseteq$、$\infty$

數學符號非常多,這裡只是列舉了一些常用的符號,更多符號細節既可以檢視萊斯大學的PDF。

數學公式與Markdown Math

前面只是介紹了單一的數學符號顯示問題,但是一段完整的數學公式則包含多個數學符號、數值,在介紹數學公式之前,我們需要先來了解一下內聯與塊狀的概念。
內聯輸出與塊狀輸出
前面我們在輸出每個符號的時候,都用兩個美元符號$$,這種方式就是內聯,所謂內聯就是我們可以把數學符號嵌入到文欄位落裡面,比如:

函式式:$f(x)=\frac{P(x)}{Q(x)}$  

函式式:$f(x)=\frac{P(x)}{Q(x)}$ ,我們可以看到這段公式在文欄位落裡面。
如果我們需要輸出的數學公式比較複雜,或者我們需要凸出並獨立顯示公式,這個時候我們就需要使用到公式的塊狀輸出,塊狀輸出的語法使用4個美元符號$$數學公式$$,我們來看案例。

$$f(x)=\frac{P(x)}{Q(x)}$$ 

使用塊狀輸出,函式會居中顯示,值得一提的是我們在使用塊狀輸出數學公式時,在Markdown裡需要換行來寫公式。
$$f(x)=\frac{P(x)}{Q(x)}$$

簡單的四則運算
我們先來看簡單的四則運算怎麼用Markdown Math編寫,

$2x - 5y =  8$  
$3x + 9y =  -12$
$7x \times 2y \neq 3z$

注意這裡的\times是乘號,\neq是不等於,輸出的效果如下:
$2x - 5y = 8$
$3x + 9y = -12$
$7x \times 2y \neq 3z$

指數輸出
Markdown Math的指數運算子是^,這個在Python裡位運算子,Python的指數運算子是**,這個注意區別即可。

$x^3+x^9$  
$x^y$  

輸出的結果為:
$x^3+x^9$
$x^y$

n次方根輸出
\sqrt{}是開平方,注意數值使用大括號{}圍住,而開n次方的語法是\sqrt[n]{},n次方的n用中括號[]圍住,我們來看下面的案例:

$\sqrt{3x-1}+\sqrt[5]{2y^5-4}$

輸出的結果是:
$\sqrt{3x-1}+\sqrt[5]{2y^5-4}$

三角公式
三角公式通常括號、字母、符號、運算子混雜的比較厲害,所以書寫的時候要特別注意,我們來看下面的例子:

$$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$$

輸出的結果如下:
$$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$$

輸出分數
輸出帶有分子分母的分數的語法為\frac{分子}{分母},使用大括號把分子、分母都圍住。

$$\frac{x}{2y} +\frac{x-y}{x+y} $$

輸出的結果如下:
$$\frac{x}{2y} +\frac{x-y}{x+y} $$

求和輸出
求和公式比較複雜,會涉及到上標和下標,在輸出指數^時我們可以把它看成是上標,使用_來輸出下標,我們來看具體案例:

$$\sum_{n=1}^\infty k$$

輸出的結果如下:
$$\sum_{n=1}^\infty k$$

極限的輸出
在我們瞭解了上下標的概念之後,輸出極限就會使用到下標,

$$\lim\limits_{x \to \infty} \exp(-x) = 0$$

輸出的結果:
$$\lim\limits_{x \to \infty} \exp(-x) = 0$$

階乘的輸出

$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$

輸出的結果如下:
$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$

Markdown Math輸出矩陣
使用\begin{matrix}\end{matrix}圍住即可輸出矩陣,矩陣之間用$來空格,用\\來換行。

$$
  \begin{matrix}
   1 & 2 & 3 \\
   4 & 5 & 6 \\
   7 & 8 & 9
  \end{matrix} 
$$

輸出的結果是:

$$ \begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{matrix} $$

複雜數學公式

分段函式的編寫
分段函式是非常複雜的,這時候會用到LaTex的cases語法,用\begin{cases}\end{cases}圍住即可,中間則用\\來分段,具體我們來看下面的例子。

$$
X(m,n)=
\begin{cases}
x(n),\\
x(n-1)\\
x(n-1)
\end{cases}
$$

分段函式輸出的結果如下:

$$ X(m,n)= \begin{cases} x(n),\\ x(n-1)\\ x(n-1) \end{cases} $$

Markdown Math也就是LaTex語法輸出數學公式的基本用法,我們先介紹到這裡,後面我們會在學習過程中接觸到時再來研究。

Markdown Math的跨平臺顯示

讓數學公式可以在知乎、簡書、公眾號等自媒體平臺以及網頁和部落格系統Wordpress上優雅的顯示,這樣才有利於數學公式的閱讀與傳播。
知乎、簡書、掘金上顯示數學公式
簡書的Markdown編輯器可以比較完美的支援Markdown語法以及Markdown Math語法,可以直接把用VS Code寫的Markdown檔案裡的內容複製貼上過去,然後進行一些簡單的修改就可以了。
而知乎自帶數學公式的插入,如果直接匯入Markdown檔案顯示會出現一些問題,需要把數學公式用知乎自帶的Tex編輯器重新書寫,只需要把$$刪除即可。

在網頁上顯示數學公式
由於我們的網頁可以不用Markdown,用HTML替換Markdown排版語法就可以,所以我們只需要專注於如何在網頁上顯示數學公式即可。比較完美的解決方案是使用mathjax,我們只需要在<head>標籤內插入mathjaxjs即可。
比如下面的案例,大家只需要把下面的程式碼複製下來並儲存為html檔案即可,不過要注意的是內聯式的語法會有些不同,不再是$符號與公式$,而是:\(符號與公式\)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p>
  當 \(a \ne 0\)時,  \(ax^2 + bx + c = 0\) 會有兩個解,它們是:
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>

數學公式在公眾號上的顯示
微信公眾號封閉且奇葩,美化微信公眾號的排版雖然用的是html和css語法,但是有很多需要注意的地方,因此排版也相對來說比較麻煩,相比知乎、簡書等自媒體平臺來說,公眾號的排版也可以做到更美觀。不過要想讓數學公式在公眾號上顯示就比較麻煩,微信公眾號是不支援LaTex語法的,所以需要把公式做成圖片,其他不支援LaTex的自媒體平臺也可以這麼處理。

公眾號顯示數學公式有一個比較簡單好用的方法就是[Md2All]http://md.aclickall.com/,可以直接把VS Code編輯的Markdown文件貼上到裡面,還能進行精美的排版,但是這個方法有兩個問題,一個是生成的圖片比較模糊,有礙觀瞻;第二就是如果數學公式過多,就需要用七牛雲的CDN,配置的方法也比較簡單,總體來說Md2All綜合效果最佳的方案,相比於其他方法更方便,也能一梭子把Markdown文件以及數學公式進行優雅的公眾號排版。

相關文章