markdown语法速查表 | 郭飞的笔记

markdown 语法

下面是分割线

基本格式

可以使用斜体，也可以使用粗体，或者使用~~删除线~~

*斜体*
**粗体**
~~删除线~~

链接

[这是一个链接](https://www.guofei.site/)
<a href='https://www.guofei.site/' target="_blank">郭飞的笔记</a>

这是一个链接
 郭飞的笔记

插入图像

![我的头像](/p/me/me.png)

我的头像

列表

无序列表：使用 *，+，- 表示无序列表。

无序列表项一
无序列表项二
无序列表项三

有序列表：使用数字和点表示有序列表。

有序列表项一
有序列表项二
有序列表项三

待办事宜 Todo 列表：使用带有 [ ] 或 [x] 表示未完成或已完成

待办1
待办2
- 支持子列表嵌套
- 支持 混用Markdown语法
待办3

引用

使用 > 表示文字引用。

示例：

野火烧不尽，春风吹又生。要打回车，否则还在引用中

这句空一行，是在引用外了

引用中也可以套列表

整理知识，学习笔记

发布日记，杂文，所见所想

撰写发布技术文稿（代码支持）

撰写发布学术论文（LaTeX 公式支持）

代码块

使用 `代码` 表示行内代码块。

示例：html。

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

示例：

这是一个代码块，此行左侧有四个不可见的空格。

也可以用一对 ``` 来引用一段代码块

@requires_authorization
class SomeClass:
    pass

if __name__ == '__main__':
    # A comment
    print 'hello world'

支持HTML语法

iframe

<iframe src="https://www.guofei.site/StatisticsBlog/HypothesisTesting.htm" width="100%" height=1600em marginwidth="10%"></iframe>
<iframe src="2.html" width="60%" height="60%"></iframe>

注脚

使用 [^keyword] 表示注脚。

这是一个注脚¹的样例。

这是第二个注脚²的样例。

LaTeX 公式

传送门：latex

$y=\int x^2$

表格

项目	价格	数量
计算机	$1600	5
手机	$12	12
管线	$1	234

定义型列表

名词 1

定义 1（左侧有一个可见的冒号和四个不可见的空格）

代码块 2

这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）

代码块（左侧有八个不可见的空格）

Html 语言

值班人员	星期一	星期二	星期三
值班人员	李强	张明	王平

其它

table与latex

markdown 的表格中插入 latex 公式

公司	公式	数值
公司A	$Y_i = \alpha + \beta X_i + \varepsilon_i$	公式值1
公司B	$E(\varepsilon_i\mid X_i) = 0$	公式值2
公司C	$var(\varepsilon_i\mid X_i) = \sigma^2$	公式值3

使用 html 的 table 插入 latex 公式

HTML 可以用 caption 标明标题
公司	公式	数值
公司A	$Y_i = \alpha + \beta X_i + \varepsilon_i$	公式值1
公司B	$E(\varepsilon_i\mid X_i) = 0$	公式值2
公司C	$var(\varepsilon_i\mid X_i) = \sigma^2$	公式值3

定制样式

可以通过设置，使得 Jekyll 解析后的 HTML 标签带 class、id、value 等，例如：

[首页](https://www.guofei.site/){:.button .primary target="_blank"}


| Header1 | Header2 |
|---------|---------|
| Row1    | Row2    |
{:#my-table .custom-class}

它们的效果如下（没有单独写对应的样式，可以查看 HTML）：

首页

Header1	Header2
Row1	Row2

mermaid语法

定义流程图方向

TB - top bottom
BT - bottom top
RL - right left
LR - left right
TD - same as TB

定义节点、线的形状

<div class="mermaid">
graph LR

A0  <!-- 默认为矩形 -->
A[矩形] 
B(圆形)
C((圆圈))
D{菱形/条件}
E>这个叫什么]


<!-- 线 -->
A1 --> B1 --- C1 -.-> D1 ==> E1

<!-- 带文字的线 -->
A2 -->|是| B2 --- |文字| C2 -.->|字| D2 ==>|字| E2
</div>

graph LR A0 A[矩形] B(圆形) C((圆圈)) D{菱形/条件} E>这个叫什么] A1 --> B1 --- C1 -.-> D1 ==> E1 A2 -->|是| B2 ---|文字| C2 -.->|字| D2 ==>|字| E2

更多的自定义格式

之后的代码，全部省略掉 <div class="mermaid">

子图

<div class="mermaid">
graph TB
        subgraph one
        a1 --> a2
        end
        subgraph two
        b1 --> b2
        end
        subgraph three
        c1 --> c2
        end
        c1-->a2
</div>

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

Styling a node

<div class="mermaid">
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;
</div>

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;

案例

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        od>Odd shape]-- Two line<br>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

graph TB sq[Square shape] --> ci((Circle shape)) subgraph A subgraph od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange

graph BT
A[Christmas] --> B(go shopping)
B --> C{let me think}
C-->|one| D[laptop]
C--> |two| E[iphone]
C--> |three| F{a}

graph BT A[Christmas] --> B(go shopping) B --> C{let me think} C-->|one| D[laptop] C--> |two| E[iphone] C--> |three| F{a}

其他 mermaid 语法

时序图（Sequence Diagram）

sequenceDiagram
    participant 客户
    participant 系统
    客户->>系统: 提交表单
    系统-->>客户: 返回结果
    客户->>系统: 再次提交

sequenceDiagram participant 客户 participant 系统客户->>系统: 提交表单系统-->>客户: 返回结果客户->>系统: 再次提交

类图（Class Diagram）

classDiagram
    class Animal {
        +String name
        +run()
    }
    class Dog {
        +String breed
    }
    Animal <|-- Dog   // 继承

classDiagram class Animal { +String name +run() } class Dog { +String breed } Animal <|-- Dog

甘特图（Gantt Chart）

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    excludes    weekends  <!-- 排除周末 -->

    section 阶段一
    任务A :done, task1, 2024-07-01, 3d
    任务B :active, task2, after task1, 4d

    section 阶段二
    任务C :done, task3, 2024-07-09, 3d
    任务D :active, task4, after task3, 4d

gantt title 项目计划 dateFormat YYYY-MM-DD axisFormat %m/%d excludes weekends section 阶段一任务A :done, task1, 2024-07-01, 3d 任务B :active, task2, after task1, 4d section 阶段二任务C :done, task3, 2024-07-09, 3d 任务D :active, task4, after task3, 4d

状态图（State Diagram）

stateDiagram-v2
    [*] --> 初始化
    初始化 --> 运行中
    运行中 --> [*]
    运行中 --> 错误
    错误 --> [*]

stateDiagram-v2 [*] --> 初始化初始化 --> 运行中运行中 --> [*] 运行中 --> 错误错误 --> [*]

ER 图（Entity Relationship Diagram）

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains

用户旅程图（Journey Diagram）

journey
    title 用户注册流程
    section 浏览页面
      用户: 5: 浏览首页
    section 注册
      用户: 3: 填写表单
      用户: 4: 邮箱验证

journey title 用户注册流程 section 浏览页面用户: 5: 浏览首页 section 注册用户: 3: 填写表单用户: 4: 邮箱验证

其它类似mermaid的语言

PlantUML（UML 行业标准）
Graphviz DOT（图论标准）：适合树、图、DAG、链表
LaTeX 数学公式（全球标准）
Markdown code blocks（通用标准）
Vega/Vega-Lite（数据可视化标准 DSL）
WaveDrom

工具

一个table生成工具：http://tableizer.journalistopia.com/
emoji：http://emojihomepage.com/

▓▓▓▓▓▓░░░░ 54%

这是一个注脚的文本。 ↩
这是另一个注脚的文本。 ↩