最爱Markdown | Markdown基本语法

最爱Markdown | Markdown基本语法

dawnguo 540 2019-05-14

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

效果如下

avatar

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)

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

avatar

7. 代码块

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

  • `代码内容`

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

  • ```语言名

    具体代码

    ```

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

单行示例

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

效果如下

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

多行示例

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

注意:因为在个人博客中3个反引号会被解析,所以加上了括号,实际上是没有括号的。

效果如下

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

8. 列表

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

8.1 有序列表

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

示例

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

效果如下

  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$

行间公式示例

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

效果如下
$$
sum = \sum_
^mx_i
$$

附:Latex数学公式常用语法

①角标(上下标)

  • 上标^{}

  • 下标_{}

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

示例

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

$$
x2, x_12, x{(n)}_{22}, {16}O{2-}_{32}, x{y{za}}, x^
$$

②分式

语法为:

\frac{分子}{分母}

示例

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

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

③根式

语法为:

\sqrt[n]{表达式}

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

示例

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

$$
\sqrt
+\sqrt b+\sqrt[3]
$$

④对数

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

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

⑤角度相关

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

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

⑥求和

求和的语法格式为:

\sum

示例:

sum = \sum_{i=1}^mx_i

$$
sum = \sum_
^mx_i
$$

⑦积分

\int

示例

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

$$
\int_01x2dx
$$

⑧极限

\lim

示例

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

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

$$

⑨常用希腊字母

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

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

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

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" />

效果如下:

Baidu

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

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

参考与推荐内容

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

# Markdown