最爱Markdown | Markdown基本语法整理汇总

mac2022-06-30  23

Markdown是一种纯文本格式的轻量级标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。这是一种14年前由作家和程序员John Gruber创建的文本编辑语言,Markdown的核心是Web发布所需的HTML代码的简写。当前许多网站都广泛使用Markdown来撰写帮助文档或者发布消息再或者发布博客,比如:Github、博客、简书、Hexo等。那么下面来简单介绍一下Markdown的语法。

1. 标题

只要在文字前面加#,即可把这段文字设置为标题。一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

注:标准语法一般在#后跟个空格再写文字,虽然现在某些markdown编辑器不用空格也可以,但是最好还是按照标准语法来。比如Typora编辑器中不空格就不会生成标题的样式。

示例

# 这是一级标题 ## 这是二级标题 ### 这是三级标题

效果如下:

2. 字体样式

在写具体内容的时候,可能需要对某些内容显示不一样的样式,以用于特别标注。那么Markdown支持以下四种样式:

加粗  要加粗的文字左右分别用两个*号即可斜体  要倾斜的文字左右分别用一个*号即可斜体加粗  要倾斜和加粗的文字左右分别用三个*号即可删除线  要加删除线的文字左右分别用两个~号即可

示例

**加粗效果** *斜体效果* ***斜体加粗效果*** ~~删除效果~~

效果如下:

加粗效果 斜体效果 斜体加粗效果 删除效果

3. 引用

在需要设为引用的文字前面加上>即可,引用也支持嵌套,如下:

> 对应的是一级引用>> 对应的是二级引用以此类推

示例

> 一级引用 >> 二级引用 >>> 三级引用

效果如下:

一级引用

二级引用

三级引用

4. 分割线

一行连用三个或者三个以上的星号*,减号-,或者下划线_,就可以表示分割线。

示例

*** --- ___

可以看到效果是一样的,如下




5. 图片

在Markdown中插入图片的语法如下

![Alt text](图片链接 "optional title") Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。 "optional title":鼠标悬置于图片上会出现的标题文字,可以不写。

5.1. 超链接形式

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。

示例

![avatar](https://www.baidu.com/img/bd_logo1.png?where=super)

效果如下

5.2. 本地图片

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。

示例

![avatar](/home/picture/1.png)

5.3. 把图片存入markdown文件

用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。

基础用法: ![avatar](data:image/png;base64,iVBORw0......) 这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。 高级用法 比如: ![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0.....

这种方法作者没试过,也不推荐。

6. 超链接

Markdown还支持超链接,语法格式如下:

[超链接名](超链接地址 "超链接title") title可加可不加

示例

[一口程序锅的博客](http://blog.dawnguo.cn)

效果如下:

一口程序锅的博客

Fun Tips

上面语法中[]中的内容为超链接名,那么[]其实可以不用文字,可以换成一张图片,如下

[![avatar](https://www.baidu.com/img/bd_logo1.png?where=super)](https://www.baidu.com)

效果如下(点击该图片之后会进行跳转):

7. 代码块

Markdown最让人喜欢的一点就是支持代码高亮,并且支持数几十种语言的高亮,语法格式很简单,如下

`代码内容`

适用场景是比如你需要在一段文字中加入一小行代码,那么在两个之间`插入代码即可。

```语言名

具体代码

```

适用场景是单独的贴上一整段代码,那么在三个`之间插入代码即可。

单行示例

只需要运行这条命令`pip install ..`即可

效果如下

只需要运行这条命令pip install ..即可

多行示例

(```)python print("markdown 真香!") print("一口程序锅 这个公众真不错!") (```) 注意:因为在个人博客中3个反引号会被解析,所以加上了括号,实际上是没有括号的。

效果如下

print("markdown 真香!") print("一口程序锅 这个公众号不错!")

8. 列表

在阐述分点的时候使用列表的形式会更加直观,Markdown支持有序和无序两种列表形式

8.1 有序列表

在需要作为列表条目的文字前面加上数字和点,并且点和后面的内容要有一个空格即可,如1. 列表条目

示例

1. 一口程序锅 这个公众不错! 2. 一口程序锅 这个公众不错! 3. 一口程序锅 这个公众不错!

效果如下

一口程序锅 这个公众不错!一口程序锅 这个公众不错!一口程序锅 这个公众不错!

8.2 无序列表

在需要作为列表条目的文字前面加上-+*这些符号中的任何一种,并且内容和符号之间要有一个空格,如- 列表条目

示例

- 一口程序锅 这个公众号不错! + 一口程序锅 这个公众号不错! * 一口程序锅 这个公众号不错!

效果如下

一口程序锅 这个公众号不错! 一口程序锅 这个公众号不错! 一口程序锅 这个公众号不错!

9. 表格

Markdown还支持插入表格,语法如下

|表头|表头|表头| |-|:-:|-:| |内容|内容|内容| |内容|内容|内容| 第二行分割表头和内容,同时也是表格居中居左居右的定义: -符号有一个就行,多个也可以,只有-符号的话默认是居左 -符号两边加:表示文字居中 -符号右边加:表示文字居右

示例

| 公众号 | 好感度 | 点赞数 | 好评数 | | - | :-: | -: |:-| | 一口程序锅 | 99+ | 99+ | 99+ | | 一口程序锅 | 99+ | 99+ | 99+ |

效果如下:

公众号好感度点赞数好评数一口程序锅99+99+99+一口程序锅99+99+99+

10. 数学公式插入

对编辑带有数学公式的笔记来说,Markdown依旧能够胜任,Markdown支持Latex数学公式,如下

行内公式,如果你想在一段文字中添加数学公式,那么使用如下语法 $行内公式$ 行间公式,如果你想你的数学公式单独成段,使用如下语法 $$ 行间公式 $$

行内公式示例

我们设变量为$x_i^n$

效果如下

我们设变量为 x i n x_i^n xin

行间公式示例

$$ sum = \sum_{i=1}^mx_i $$

效果如下 s u m = ∑ i = 1 m x i sum = \sum_{i=1}^mx_i sum=i=1mxi

附:Latex数学公式常用语法

①角标(上下标)

上标^{}

下标_{}

上述这些上下标是用来放在需要插入上下标的地方,花括弧内为上下标的内容,当角标为单个字符时候,可以不用花括号,但是如果角标为多字符或者多层次时,必须要使用花括号。

示例

x^2, x_1^2, x^{(n)}_{22}, ^{16}O^{2-}_{32}, x^{y^{z^a}}, x^{y_z}

x 2 , x 1 2 , x 22 ( n ) , 16 O 32 2 − , x y z a , x y z x^2, x_1^2, x^{(n)}_{22}, ^{16}O^{2-}_{32}, x^{y^{z^a}}, x^{y_z} x2,x12,x22(n),16O322,xyza,xyz

②分式

语法为:

\frac{分子}{分母}

示例

\frac{x+y}{y+z}

x + y y + z \frac{x+y}{y+z} y+zx+y

③根式

语法为:

\sqrt[n]{表达式}

如果是平方根公式的话,那么[n]不填;如果表达式是个单个字符,则可以不用花括号,但需要在字符和 sqrt之间加入一个空格。

示例

\sqrt{a}+\sqrt b+\sqrt[3]{c}

a + b + c 3 \sqrt{a}+\sqrt b+\sqrt[3]{c} a +b +3c

④对数

\log_33,\lg8,ln2,log_{12}38

log ⁡ 3 3 , lg ⁡ 8 , l n 2 , l o g 12 38 \log_33,\lg8,ln2,log_{12}38 log33,lg8,ln2,log1238

⑤角度相关

\angle 30^\circ,\sin3,\cos3,\tan5,\cot4,\sec5,\csc5

∠ 3 0 ∘ , sin ⁡ 3 , cos ⁡ 3 , tan ⁡ 5 , cot ⁡ 4 , sec ⁡ 5 , csc ⁡ 5 \angle 30^\circ,\sin3,\cos3,\tan5,\cot4,\sec5,\csc5 30,sin3,cos3,tan5,cot4,sec5,csc5

⑥求和

求和的语法格式为:

\sum

示例:

sum = \sum_{i=1}^mx_i

s u m = ∑ i = 1 m x i sum = \sum_{i=1}^mx_i sum=i=1mxi

⑦积分

\int

示例

\int_{0}^{1}x^{2}dx

∫ 0 1 x 2 d x \int_0^1x^2dx 01x2dx

⑧极限

\lim

示例

\lim_{n\rightarrow+\infty}\frac{1}{n}

lim ⁡ n → + ∞ 1 n \lim_{n\rightarrow+\infty}\frac{1}{n} n+limn1

⑨常用希腊字母

\alpha,\beta,\gamma,\theta,\Theta,\Omega,\xi

α , β , γ , θ , Θ , Ω , ξ \alpha,\beta,\gamma,\theta,\Theta,\Omega,\xi α,β,γ,θ,Θ,Ω,ξ

更多的Latex语法可以参考以下两篇博客:

_Markdown 添加 Latex 数学公式_【Markdown】markdown 输入数学符号

11. 目录

键入[TOC],之后回车目录便会呈现,目录树会根据文档中的h1~h6标题自动生成,并且支持点击跳转。

注意:[TOC]需要独占一行才能生效

手动添加跳转到某个标题的链接。使用如下的语法:

[名称](#id) “名称”可以随便填写,“id”需要填写跳转到的标题的内容。

示例

[10. 数学公式插入](#10. 数学公式插入)

效果如下

[10. 数学公式插入](#10. 数学公式插入)

Markdown会自动给每一个h1~h6标题生成一个锚,其id就是标题内容

12. 支持HTML

如开头所说,Markdown的核心是Web发布所需的HTML代码的简写,那么markdown自然也支持html语言。举个简单的例子,比如使用Markdown使用# 一级标题来设置为一级标题,那么我们也可以用<h1>一级标题</h1>来设置一级标题。

HTML示例

<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>

效果如下:

既然Markdown语法很简洁,那么什么时候需要用到HTML呢?比如我们需要对Markdown中插入的图片大小进行修改的时候(markdown暂不支持此类属性的设置),可以使用如下HTML代码:

<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="Baidu" width="50" height="50" />

效果如下:

为了更加便于理解与使用,附上维基百科上的一个表格:

更加详细的对应关系可以点击本文“参考与推荐内容”中提到的相关链接。

参考与推荐内容:

简书_Markdown基本语法简书_MarkDown添加图片的三种方式_Markdown 添加 Latex 数学公式_【Markdown】markdown 输入数学符号个人博客_Markdown语法对应的HTML标签实现

欢迎关注微信公众号【一口程序锅】,一口想煮点技术的锅。

最新回复(0)