Markdown相关用法

分割线

有两种形式，使用下面的两种形式都是可以的

***
---

插入表格

语法：

表头 | 条目一 | 条目二
:---: | :---: | :---: 
项目 | 项目一 | 项目二

# 对齐方式
# :---  左对齐
# ---:  右对齐
# :---: 居中对齐

添加空格

有两种方法添加空格：

• 手动输入空格（&nbsp；）。注意！此时的分号为英文分号，但是不推荐使用此方法，太麻烦！
• 使用全角空格。即：在全角输入状态下直接使用空格键就ok了

特殊符号处理

Markdown 使用反斜杠 \ 转义特殊字符：

注意： 插入反斜杠需要输入两个反斜杠: \\ => \

其他特殊字符的Unidoce码
特殊符号Unicode码

表格中输入竖线

有三种方法：

1. 使用 HTML 实体：| 或 |
2. 在表格中直接使用 |
3. 在代码块中使用 <code></code> 标签

实例

一：竖线直接在表格中显示：用|代替
原始markdown书写

a | r
:--- | :---
a += x | avc
a | x | avb

效果

二：竖线用在表格中的代码效果
原始markdown书写

a | r 
:--- | :---
``a += x;`` | r1 
<code>a &#124;= y;</code> | r2 

效果

表格中输入换行

使用</br>或者<br>

给文字加色

Markdown 本身不支持文字颜色，但可以通过内嵌 HTML 实现：

<font color="#ff0000">红色文字</font>
<font color="#0099ff" size="5">蓝色大号文字</font>

字体和字号设置：

<font face="黑体">黑体字</font>
<font face="微软雅黑">微软雅黑</font>
<font size="5">大号文字</font>

换行

有两种方式：

1. 行尾添加两个以上空格后回车
2. 使用 HTML 换行标签 <br> 或 </br>

Emoji 表情符号

支持在 Markdown 中使用 Emoji 表情：

• 完整列表：Emoji Cheat Sheet
• 常用表情：:smile: 😊 :heart: ❤️ :+1: 👍

基于Mermaid的流程图、甘特图、时序图

使用 Mermaid 画流程图，需要将代码块的语言标识为 mermaid：

• 源码

    ```mermaid
    graph TB
        A[主题] --> 主题字体
        A --> 主题颜色
        A --> 主题效果
        A --> 主题背景样式
    ```

• 效果

Graph 方向说明

关键字 graph 表示一个流程图的开始，同时需要指定该图的方向：

示例：

• 源码

  graph LR
  A --> B
  

• 效果

节点定义

流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。
有下面几种节点和形状：

当节点的文字包含标点符号，需要使用双引号包裹

• 源码

  graph LR
      A --> B[name_b] 
      B --> C(name_c)
      C --> D((name_d))
      D --> E>name]
      E --> Fname
      F --> N{name_n}
  

• 效果

节点间的连线

子图表

子图表语法

子图表的语法格式如下所示：

subgraph 子图表名称
    子图表中的描述语句...
end

下面是一个使用子图表的示例：

• 源码

  graph TB
      A --> B
      subgraph 子图表
          B --> C
          C --> D
      end
      D --> E
      E --> F
  

• 效果

子图表示例

• 示例 1

  • 源码

    graph TB
        id1(圆形矩形) -- 普通线  --> id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    

  • 效果

• 示例 2

  • 源码

    graph TB
        subgraph 模板视图
            A[母版] --> B[版式1]
            A --> C[版式2]
            A --> D[版式3]
            A --> F[版式4]
        end
        B --> 幻灯片1
        C --> 幻灯片2
        C --> 幻灯片3
        C --> 幻灯片4
        D --> 幻灯片5
    

  • 效果

FontAwesome 图标支持

在 Mermaid 图表中，可以使用 fa: #图标名称# 的语法来添加 FontAwesome 图标。下面是一个示例：

• 源码

  flowchart TD
      B["<i class="fa-brands fa-twitter"></i> for peace"]
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner)
      B-->E(A fa:fa-camera-retro perhaps?)
  

• 效果

参考： Mermaid 支持 FontAwesome 图标FontAwesome 图标

Typora 画流程图

• 源码

  graph TB
      A[主题] --> 主题字体
      A --> 主题颜色
      A --> 主题效果
      A --> 主题背景样式
  

• 效果