【超用心整理】Markdown常用语法介绍，看这一个就够了

Markdown常用语法介绍

Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言，它的特点是可以使用普通的文本编辑器来编写，只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。本文就来介绍一些常用的Markdown语法以及推荐几款方便又实用的Markdown编辑器。

换行问题

换行是markdown最基本的语法规则，也是它不同于普通文本的地方，想要在某一行之后进行换行只按常规的Enter键是不行的。换行有3种方式：

1. 在行的末尾添加至少两个空格，然后再接Enter另起一行；
2. 第2种方式是在需要换行的两行内容之间空一行；
3. 第3种方式是在需要换行的内容末尾添加一个换行标签，也就是<br>标签。

标题分级

在当前行之前输入 “#”+"空格"可以使当前行被识别为标题

"# " -> 一级标题是
"## " -> 二级标题
"### " -> 三级标题

标题分级另一种写法

在当前行的下一行输入一个或者多个"=“和”-"可以使当前行被识别为标题

“这是一个一级标题”
“=”

“这是一个二级标题”
“-”

分割线

使用三个或以上的 “-” 或者 “*” 表示(混合的不行)，且这一行只有符号，注意不要被识别为二级标题即可，意思是上面需要是空行，例如中间或者前面可以加空格。

语法

斜体和粗体

使用 (

*

或者

_

)和(

**

或者

__

) 分别表示斜体和粗体，删除线使用两个

~

表示

语法

我是斜体
我是斜体
我是加粗
我是加粗
我是删除
我是又粗又斜
我是又粗又斜

超链接和图片引用

超链接

内联超链接

使用

[链接文字](链接地址)

来表示，如果要给链接一个提示信息，可以在链接用引号把文字包围起来，就像这样

[链接文字](链接地址+空格+"文字说明")

语法

[链接例子《就是外在文字》](http://www.baidu.com/" 我是说明文字：我其实就是HTML 的 标签的 Title 属性")

<>

http://example.com/

引用式链接

在任意地方使用

[链接引用标记]:链接地址+空格+"文字说明"

来定义引用的链接地址,然后使用

[链接文字][链接引用标记]

放在需要插入链接的地方

语法

[link1]:http://www.baidu.com/ “baidu.com 其实就是HTML 的 标签的 Title 属性”
[引用式链接例子《就是外在文字》][link1]

[Google][]
[Google]: http://google.com/

图片引用

内联式图片引用

图片引用仅在超链接前多了一个

!

，一般是

![图片文字](图片地址+空格+"文字说明")

语法


[图片引用标记]:图片地址+空格+"文字说明"

[图片文字][图片引用标记]

[link2]:http://www.baidu.com/images/logo.png “baidu.com 其实就是HTML 的 标签的 Title 属性”
![引用式图片链接例子《就是Alt属性》][link2]

[](http://www.baidu.com/ “链接说明文字”)

无序列表

使用

-

、

+

和

*

• 空格
  

  • 文字内容
    

    表示无序列表
    可用

    tab
    

    或者

    空格
    

  • ```

• 、
  

• 或者 
  

• +
  

  文字内容
  ```
  使列表嵌套

成功嵌套的条件是下一层的

-

、

+

和

*

的前面的空白长度满足以下条件

tab长度×(层数-1) < 空白长度 ≤ tab长度×层数

 + 第一层
   * 第二层
    + 第三层

 + 再来一个第一层

有序列表

使用

1.

• 空格
  

• 文字内容
  

  表示有序列表，可嵌套。
  可用

  tab
  

  或者

  空格
  

• ```

• 、
  

• 或者 
  

• +
  

  文字内容
  ```
  使列表嵌套

成功嵌套的条件是下一层的

-

、

+

和

*

的前面的空白长度满足以下条件

tab长度×(层数-1) < 空白长度 ≤ tab长度×层数

语法

 1. 第一层
   1. 第二层
    1. 第三层

  2. 再来一个第一层

实例

1. 第一层

2. 第二层.1

3. 第二层.2 1. 第三层.12. 第三层.2

4. 第二层.3

5. 在列表结束敲二个空行，在第二个空行中写入任何内容都可以重开一个计数列表

文字引用

使用

>

表示，可以有多个

>

，表示层级更深

要从深层到浅层需要在浅层上方留一个有与层数相同个数

>

的空行

语法

文字内容
文字内容

文字内容

文字内容
文字内容

实例

文字内容
文字内容

文字内容

文字内容
文字内容

行内代码块

使用 " ` " 把代码包围起来即可

语法

a = 1

如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：

语法
There is a literal backtick (`) here.

代码块

方法一

使用四个空格缩进表示代码块，

语法

  import os
  print("hello world")
  def show_time():
  return time.time()

方法二

一些 IDE 支持行数提示和着色，一般使用三个 " " 表示，例如 代码块使用3个 " "包围起来表示，而且代码块的第一行的3个 " ` " 后面可以写上代码的编程语言，方便Markdown转化之后进行高亮显示，如写上python或者js

语法

```python
import os
print("hello world")
def show_time():
return time.time()
`` `

表格

表格由3个部分组成

第一个部分是表格的标题，使用

|

来作为列的分割
第二个部分是表示列的对齐方式，有左对齐、居中对齐和居右对齐三种类型，直接看例子吧，

---

表示了默认的左对齐，

:---

表示 左对齐 ，

---:

表示 右对齐 ，

:---:

表示居中对齐
第三个部分就是内容了，表示方式跟标题一样，可以有多行

语法

左对齐标题	右对齐标题	居中对齐标题
居左	居右	居中
测试文本	测试文本	测试文本

实例

左对齐标题右对齐标题居中对齐标题居左居右居中测试文本测试文本测试文本

流程图

不同的Markdown解析器原理不同，不一定支持流程图
obsidian 支持 mermaid 流程图。其他的流程图也许要安装插件
mermaid文档: https://mermaid-js.github.io/mermaid/#/README
mermaid在线编辑器: https://mermaid-js.github.io/mermaid-live-editor

语法

  ```mermaid 
  sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop Healthcheck
  John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

实例

#mermaid-svg-qawW8Z3ZG73cWxBa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa .error-icon{fill:#552222;}#mermaid-svg-qawW8Z3ZG73cWxBa .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qawW8Z3ZG73cWxBa .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-qawW8Z3ZG73cWxBa .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qawW8Z3ZG73cWxBa .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qawW8Z3ZG73cWxBa .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qawW8Z3ZG73cWxBa .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qawW8Z3ZG73cWxBa .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qawW8Z3ZG73cWxBa .marker.cross{stroke:#333333;}#mermaid-svg-qawW8Z3ZG73cWxBa svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qawW8Z3ZG73cWxBa .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qawW8Z3ZG73cWxBa text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-qawW8Z3ZG73cWxBa .actor-line{stroke:grey;}#mermaid-svg-qawW8Z3ZG73cWxBa .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa .sequenceNumber{fill:white;}#mermaid-svg-qawW8Z3ZG73cWxBa #sequencenumber{fill:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa .messageText{fill:#333;stroke:#333;}#mermaid-svg-qawW8Z3ZG73cWxBa .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qawW8Z3ZG73cWxBa .labelText,#mermaid-svg-qawW8Z3ZG73cWxBa .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-qawW8Z3ZG73cWxBa .loopText,#mermaid-svg-qawW8Z3ZG73cWxBa .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-qawW8Z3ZG73cWxBa .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-qawW8Z3ZG73cWxBa .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-qawW8Z3ZG73cWxBa .noteText,#mermaid-svg-qawW8Z3ZG73cWxBa .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-qawW8Z3ZG73cWxBa .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qawW8Z3ZG73cWxBa .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qawW8Z3ZG73cWxBa .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qawW8Z3ZG73cWxBa .actorPopupMenu{position:absolute;}#mermaid-svg-qawW8Z3ZG73cWxBa .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-qawW8Z3ZG73cWxBa .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qawW8Z3ZG73cWxBa .actor-man circle,#mermaid-svg-qawW8Z3ZG73cWxBa line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-qawW8Z3ZG73cWxBa :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
Alice

   John
  
   Bob
  
Hello John, how are you?

Fight against hypochondria

 loop

  [Healthcheck]
 
  Rational thoughts!
 
Great!

How about you?

Jolly good!

  Alice
 
  John
 
  Bob
 

数学公式

支持 LaTeX 编辑显示支持，
使用

$

表示，其中一个

$

表示在行内，两个

$

表示独占一行。

eg :

      ∑
     
     
      
       i
      
      
       =
      
      
       1
      
     
     
      n
     
    
    
     
      a
     
     
      i
     
    
    
     =
    
    
     0
    
   
   
    \sum_{i=1}^n a_i=0
   
  
 ∑i=1n​ai​=0

参考教程：https://1024th.github.io/MathJax_Tutorial_CN

推荐一个常用的数学公式在线编译网站：https://www.latexlive.com

HTML引用

直接在Markdown里面写HTML即可

CSS 样式相关

样式标签

加粗
加粗
倾斜
倾斜
下划线
下划线
删除线
删除线
_下标
^上标

内联样式

<b style=“font-size:80px; color:red”>加粗

<style>标签

<style> h1{ font-size:80px; color:#7ecef4; text-intent:10px; } </style>

<link>引用外部CSS

<link href=“main.css” rel=“stylesheet”>

这种方式，某些Markdown渲染器可以，反正obsidian是不行

HTML 内容相关

在Markdown中可以展示出网页内容
支持的也就是普通的内容，交互式的标签基本都被和谐了
HTML教程：https://www.runoob.com/html/html-tutorial.html

**例子，用html的

<a>

和

<img>

标签实现带连接的图片**

JavaScript 脚本相关

很多Markdown渲染器是不允许js跑起来的

外部引用和直接写这两种基本都跑不起来
<script src=“javascript.js”></script>

<script> console.log(“hello world!”) </script>

内联事件的js可能可以跑起来,反正obsidian是不行
<div οnclick=“(function(){ alert(1)})()”>js测试按钮