markdown+mathjax显示公式，苦逼的找bug过程

Posted on Edited on In

在记录自己学习过程中，难免会遇到公式，截图的办法不是长久之计。于是我给它加上了渲染公式的过程。

整个过程非常崎岖。

其实很简单，在普通的页面上引入一个js文件，就可以将latex代码渲染成公式。为了方便编写，我直接在文章中引入了这个js，在vs code上渲染是非常成功的。但是在博客上怎么弄也没法成功。百度的话有很多相关的博客来介绍怎么去做，主要是因为hexo的渲染器与mathjax中部分语法有冲突。我也天真的相信我的问题就是这些构成的，后来我发现即使是最简单的公式（没有下标）也无法渲染成功，此时我的blog里已经加了很多别的没用包了，也删除了很多可能有用的包，怎么设置也没办法。

昨晚就纠结了很久，今天没办法了重新装了下blog，先解决最简单公式显示的问题（直接打开next主题中的mathjax开关），成功了，然后我遇到的问题，才是别人遇到的那些问题。慢慢解决，后来发现还是有部分错误，有两处问题：

1.这次是latex与markdown的冲突：markdown中的*是斜体，因此尽量乘法不要使用它，可以使用{a b}（a×ba \times b）来代替来代替 a*b,或者就是对*进行转义，或者直接省略。

2.在使用范式时||a||，似乎直接使用‘|’这个符号也会出错，总之有范式的地方的公式显示是很混乱的，可能也有冲突（在latex是可以直接使用这个符号的），因此使用{a }（‖a‖{\Vert a \Vert}）来代替。

最后，浏览器响应github page的速度不快，可能已经deploy了但是依然没有体现出更新的结果。

哎，折腾了一天，感觉收获远远不够花费的时间，不过我经常遇到这样的问题，找bug的能力还有待提高。

P.S. Markdown与latex常用语法

markdown语法

  • 标题：
1
2
3
# 一号字体 #
## 二号字体 ## 
### 三号字体 ###

一号字体

二号字体

三号字体

  • 加粗：

要加粗的文字左右分别用两个*号包起来

  • 斜体：

要倾斜的文字左右分别用一个*号包起来

  • 斜体加粗：

要倾斜和加粗的文字左右分别用三个*号包起来

  • 删除线：

要加删除线的文字左右分别用两个号包起来

1
2
3
4
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

这是加粗的文字

这是倾斜的文字

这是斜体加粗的文字

这是加删除线的文字

  • 引用：

在引用的文字前加>即可

1
> 引用的内容

引用的内容

  • 分割线： 
    1
    2
    ---
    ***
  • 超链接：
1
[name](url)

Google

  • 图片：
1
![name](imgurl)
name
  • 列表：
1
2
3
- 列表内容
+ 列表内容
* 列表内容
注意：- + * 跟内容之间都要有一个空格

  • 列表内容

  • 列表内容

  • 列表内容

  • 表格：

1
2
3
4
表头|表头|表头
---|:--:|---:
内容|内容2|内容
内容|内容100|内容

第二行分割表头和内容。 文字默认居左 -两边加：表示文字居中 -右边加：表示文字居右 注：原生的语法两边都要用 | 包起来。此处省略

表头 表头 表头
内容 内容2 内容
内容 内容100 内容
  • 代码：

单行代码 

1
多行代码

vscode中前面加制表符自动为代码格式。 可以在标记后标记出代码语言，用来高亮： 

1
2
3
4
5
#include<stdio.h>
int main()
{
    printf("hello,world");
}

Latex语法

  • 希腊字母：
显示 命令 显示 命令
α β
γ δ
ε ζ
η θ
ι κ
λ μ
ν ξ
π ρ
σ τ
υ φ
χ ψ
ω

命令首字母大写则为显示为大写。

  • 字母修饰：

上标：^

下标：_

举例：C_n^2 呈现为 Cn2C_n^2

矢量：

a呈现为 a→\vec a

呈现为xy→\overrightarrow{xy}

  • 分组:

使用{}将具有相同等级的内容扩入其中，成组处理

举例：10{10}呈现为$10{10}$，而1010呈现为$1010$

  • 括号： 小括号：()呈现为() 中括号：[]呈现为[] 尖括号：,⟨,⟩\langle,\rangle

大括号为与分组符号{}相区别，使用转义字符

使用(或)使符号大小与邻近的公式相适应；该语句适用于所有括号类型

()呈现为(xy)(\frac{x}{y})

而()呈现为(xy)\left(\frac{x}{y}\right)

  • 求和：

求和符号∑∑

举例:_ {i=0}^n 显示为 ∑i=0n\sum_ {i=0}^n

  • 极限：

极限符号limlim

举例:_ {x}

$ _ {x} $

  • 积分：
命令 显示
∫
∬
∭
∬∬
∮

举例：_0^ 显示为∫0∞f(x)dx\int_0^\infty{f(x)dx}

  • 分式：

显示为公式1公式2\frac{公式1}{公式2}

举例:a b ab\frac a b

  • 根号： 显示为yx\sqrt[x]{y}

  • 常见函数：

举例:x,x,_n^2 5,(A,B,C)显示为 sin⁡x,ln⁡x,log⁡n2,max⁡(A,B,C) \sin x,\ln x,\log_n^2,\max(A,B,C)

暂时写这么些，还有很多其他用法，需要平时的积累。