使用Markdown输出LaTex数学公式

现在大数据、人工智能、数据分析等很多技术岗位都对数学有一定的要求,数学越来越重要,很多人也开始尝试学习数学,脑子里突然就有了结合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 \quad \text{ for $|q|<1$} \tag{12}.

输出分数
输出带有分子分母的分数的语法为\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>
</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,可以直接把VS Code编辑的Markdown文档粘贴到里面,还能进行精美的排版,但是这个方法有两个问题,一个是生成的图片比较模糊,有碍观瞻;第二就是如果数学公式过多,就需要用七牛云的CDN,配置的方法也比较简单,总体来说Md2All综合效果最佳的方案,相比于其他方法更方便,也能一梭子把Markdown文档以及数学公式进行优雅的公众号排版。

\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342