我的Markdown语法教程

---

title: 我的Markdown【终极教程】.md
date: 2022-01-03 16:22:00
tags:

---

Markdown 终极教程

1. Markdown的基本使用

1.1 多级标题

# 一级标题

## 二级标题

### 三级标题

#### 四级标题（有点多了吧）

1.2 列表清单

无序列表/清单（*，-，+ 三种写法都可以触发）

• 第一点：标准语法用星号
• 第二点：
  • 2.1：可以只用星号，Tab缩进一级
    • 2.2.1

• 用 - 也行
• 多数都应该支持 *，-

• 用 + 也可以
  • 首先
  • 然后
    • xxx

有序列表/清单(数字123+.)

1. 我们都是地球人
2. 为啥你不会Markdown?
3. 看完还不会就要被安排了。。

1.3 引用（区块）

种一棵树最好是十年前，其次是现在。

区块一

区块二

区块三

没有调查，就没有发言权。 —— 毛泽东

1.3 代码块

用三个反引号```标记代码开始和结束```

• Python

import pandas, re, requests, json

print("Hello, Markdown")

def func():
    pass

• MySQL

select * from emp where empno = 7788;
select deptno, avg(sal) from emp group by deptno;

• 标记为SQL更通用（推荐）

select * from emp where empno = 7788;
select deptno, avg(sal) from emp group by deptno;

• Oracle暂不支持

select * from emp where empno = 7788;
select deptno, avg(sal) from emp group by deptno;

1.4 字体

• 加粗 写法一
  • 自定义快捷键：Ctrl+Alt+B
• 粗体/加粗 写法二
• 斜体（少用，不易阅读）
• <u>下划线效果。
  因为会与超链接的下划线混淆，所以Markdown没有提供原生的标记语言。
  将内容 放在 <u>..context..</u> 中，即可 </u>
  • 或用数学公式中的下划线：$\underline{X}$ ， $\underline{敲黑板划重点了}$
    • 参考：知乎:使用 Markdown 时，如何为文字加下划线？
• 删除线。。这是一个悲伤的故事。。

1.5 链接的写法

• 写法一：直接超链接地址（自动识别并生成）

  • https://github.com - 这是标准写法
  • https://github.com - 这是随意写法

• 写法二：超链接地址的标题Title

  • Google

• 写法三：带触发标记的超链接（鼠标移动到时显示）

  • Goooooogle

1.6 段落与换行

• html换行方式：用
  或
  

• 转义换一行 &nbsp;
   

  注：不太重要，可忽略，无纠结。

1.7 插入图片（三种方式）

• 链接式插入：![image_name](http://www.xx.com/img.png)
  
• HTML式标签插入（可方便控制大小尺寸，位置等属性）
  如 <img width="100" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png">
  自定义大小<img width=”100” src=”url_to_png_or_any_picture”>

• 嵌入式插入
  转为base64代码，适用于插入本地图片，截图等。
  可直接写代码转为base64，或在线转换后，复制粘贴到md文件里。

附：在线转换网站：

• 菜鸟工具
• Base64.guru

1.8 分割线(连续3个减号或星号)

---

——- Fake Fibonacci Line 我是假的黄金分割线 ——

---

1.9 注释

Markdown内嵌html语法，所以支持html注释和语法

• html语法注释：

• 用markdown的解析原理来实现注释

  • 这种方法最稳定，适用性最强:
    写法：[//] # (注释内容)
  • 这种最可爱，超级无敌萌啊：
    写法：[^_^]: # (注释内容)

1.10 表格

左对齐标题	右对齐标题	居中对齐标题
短文本	中等文本	稍微长一点的文本
稍微长一点的文本	短文本	中等文本

1.11 任务列表 Todo-list 与 “复选框”

• @mentions, #refs, links, formatting, and <del>tags </del> supported
• list syntax required (any unordered or ordered list supported)
• this is a complete item
• this is an incomplete item <br><br>

1.12 其他语法(扩展语法)

==Marked高亮标记==

• 2^8^ 上标用： ^8^

• H2O 下标用： ~2~

• Content Footnote 内容脚注 [^1]

• 😄 :fa-car: 😂 😳😳

• 😂

• 🤣

1.13 数学公式及其相关网站和工具

latex公式网站: https://kz16.top/latex/symbol/ （大家都说好）
把公式转化为svg: https://mdnice.com/ 可用来写邮件和公众号(部分邮件可能不支持)
数学绘图相关：https://www.geogebra.org/

---

Markdown进阶

2.1 流程图(算法图)

st=>start: Start:>https://github.com/adrai/flowchart.js[关于flowchar参考]
e=>end:>https://github.com/adrai/flowchart.js
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://github.com/adrai/flowchart.js
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

---

Markdown的绘图插件，mermaid语法（太牛逼！！！）

2.2 mermaid语法 之 制图

方向

• TB/TD - top bottom
• BT - bottom top
• RL - right left
• LR - left right

graph LR
问题描述 --> 前提条件

节点形状（节点名+节点形状符号语法）

graph LR
默认方形
rect[方形] --描述--> roundedRect(圆角矩形)
round((圆形)) -.我变.-> condition{菱形}  
tag>标签]

graph LR

a_node((这是一个节点))
y_node(另一个节点)

a((一个字符作为节点名称也行)) --> b[注:暂不支持中文标点符号]

c[自己]-->c[返回自己]

start-->  x[不管你在哪,我都可以指你的名字]-->y_node-->x

连线与箭头

graph LR
    A[A] --> B[B]
    A1[A] --- B1[B]
    A4[A] -.- B4[B]
    A5[A] -.-> B5[B]
    A7[A] ==> B7[B]
    A2[A] -- 描述 --- B2[B]
    A3[A] -- 描述 --> B3[B]
    A6[A] -. 描述 .-> B6[B]
    A8[A] == 描述 ==> B8[B]

graph LR
　　A-->B
　　A-->C

graph TD
　　B-->D
　　C-->D

子图

graph LR
  a[A] --> b[B]
  subgraph 子图/局部图 
  b[B] --> c[C]
  end
  c[Cx] --> d[D]

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

样式

linkStyle 后面的数字表示第几根线，从 0 开始。可以指定颜色和粗细。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    linkStyle 0 stroke:#0ff,stroke-width:2px;
    linkStyle 3 stroke:#ff3,stroke-width:4px;

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

---

参考文章

• Markdown 基本要素
• 代码真香：什么是Markdown？
• 如何插入图片怎么定义图片的大小或比例
• markdown 图片文字等内容居中显示的方法
• 插件Markdown Support for Visual Studio Code
• 🤔 Markdown玩转Emoji
• markdown绘图插件：mermaid语法
• 在Markdown中使用Mermaid画图
• Mermaid GitHub 文档、教程
• mermaid 语法
• 如何在Markdown中画流程图
• 在Markdown中写注释

---

[^1]: Hi, this is the footnot.这里是相关内容的脚注（特别说明）。