Markdown相关用法

2025-02-17

分割线

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

***
---

插入表格

语法：

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

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

添加空格

有两种方法添加空格：

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

特殊符号处理

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

符号	说明
\\	反斜杠
\`	反引号
\_	下划线
\{\}	花括号
\(\)	小括号
\[\]	方括号
\#	井号
\+	加号
\-	减号
\.	句点
\!	感叹号

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

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

工具或网站	是否支持特殊字符
简书	Yes
MarkdownPad	No
有道云笔记	Yes
zybuluo.com	Yes

表格中输入竖线

有三种方法：

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

实例

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

a | r
:--- | :---
a += x | avc
a &#124; x | avb

效果

a	r
a += x	avc
a \| x	avb

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

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

效果

a	r
`a += x`	r1
a \|= y	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>

换行

有两种方式：

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

Emoji 表情符号

支持在 Markdown 中使用 Emoji 表情：

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

工具或网站	是否支持
简书	否
MarkDownPad	否
有道云笔记	否
zybuluo.com	否
github	是

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

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

源码

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

效果

Graph 方向说明

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

用词	含义
TB（top bottom）	表示从上到下
BT（bottom top）	表示从下到上
RL（right left）	表示从右到左
LR（left right）	表示从左到右
TD 等同于 TB	表示从上到下

示例：

源码

---
title: 从上到下
---
graph TB
A --> B

效果

节点定义

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

表述	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id >文字]	右向旗帜状节点
id	菱形节点

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

源码

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

效果

节点间的连线

表述	说明
>	添加尾部箭头
-	不添加尾部箭头
-	单线
—text—	单线上加文字
==	粗线
text	粗线加文字
-.-	虚线
-.text.-	虚线加文字

子图表

子图表语法

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

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 --> 主题背景样式

效果

版权所有

本文链接：/markdown/it6hws7h/

许可证：署名 4.0 国际 (CC-BY-4.0)