Markdown 从入门到精通（特殊用法）

4.3.24 高亮一行公式

使用 \bbox[底色, (可选)边距, (可选)边框 border: 框宽度 框类型 框颜色] 命令来高亮一行公式。
底色和框颜色支持详见“[更改文字颜色](# 4更改文字颜色-color)”，边距及框宽度支持 绝对像素 px 或 相对大小 em，框类型支持 实线 solid 或 虚线 dashed。

  • 例子：
$$
\bbox[yellow]{
    e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n \qquad (1)
}
$$
  • 显示：

image

  • 例子：
$$
\bbox[#9ff, 5px]{ % 此处向外添加 5 像素的边距
    e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n \qquad (1)
}
$$
  • 显示：

image

  • 例子：
$$
% 此处使用 0.5 倍行高作为边距，附加 2 像素的实线边框（Ctrl+Alt+Y 可见）
\bbox[#2f3542, 0.5em, border:2px solid #f1f2f6]{
    \color{#f1f2f6}{e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n \qquad (1)}
}
$$
  • 显示：

image

4.3.25 更改文字颜色

使用 \color{颜色}{文字} 来更改特定的文字颜色。

更改文字颜色需要浏览器支持 ，如果浏览器不知道你所需的颜色，那么文字将被渲染为黑色。对于较旧的浏览器（HTML4 & CSS2），以下颜色是被支持的：

|  输入  |          显示          |  输入   |          显示           |
| :----: | :--------------------: | :-----: | :---------------------: |
| black  | $\color{black}{text}$  |  grey   |  $\color{grey}{text}$   |
| silver | $\color{silver}{text}$ |  white  |  $\color{white}{text}$  |
| maroon | $\color{maroon}{text}$ |   red   |   $\color{red}{text}$   |
| yellow | $\color{yellow}{text}$ |  lime   |  $\color{lime}{text}$   |
| olive  | $\color{olive}{text}$  |  green  |  $\color{green}{text}$  |
|  teal  |  $\color{teal}{text}$  |  auqa   |  $\color{auqa}{text}$   |
|  blue  |  $\color{blue}{text}$  |  navy   |  $\color{navy}{text}$   |
| purple | $\color{purple}{text}$ | fuchsia | $\color{fuchsia}{text}$ |

image

对于较新的浏览器（HTML5 & CSS3），HEX 颜色将被支持：

输入 \color {#rgb} {text} 来自定义更多的颜色，其中 #rgb 或 #rrggbb 的 r g b 可输入 0-9 和 a-f 来表示红色、绿色和蓝色的纯度（饱和度）。

  • 例子：
$$
\begin{array}{|rrrrrrrr|}\hline
    \verb+#000+ & \color{#000}{text} & & &
    \verb+#00F+ & \color{#00F}{text} & & \\
    & & \verb+#0F0+ & \color{#0F0}{text} &
    & & \verb+#0FF+ & \color{#0FF}{text} \\
    \verb+#F00+ & \color{#F00}{text} & & &
    \verb+#F0F+ & \color{#F0F}{text} & & \\
    & & \verb+#FF0+ & \color{#FF0}{text} &
    & & \verb+#FFF+ & \color{#FFF}{text} \\
\hline\end{array}
$$

  • 显示：
    image

  • 例子：

$$
\begin{array}{|rrrrrrrr|}\hline
    \verb+#000+ & \color{#000}{text} & \verb+#005+ & \color{#005}{text} & \verb+#00A+ & \color{#00A}{text} & \verb+#00F+ & \color{#00F}{text}  \\
    \verb+#500+ & \color{#500}{text} & \verb+#505+ & \color{#505}{text} & \verb+#50A+ & \color{#50A}{text} & \verb+#50F+ & \color{#50F}{text}  \\
    \verb+#A00+ & \color{#A00}{text} & \verb+#A05+ & \color{#A05}{text} & \verb+#A0A+ & \color{#A0A}{text} & \verb+#A0F+ & \color{#A0F}{text}  \\
    \verb+#F00+ & \color{#F00}{text} & \verb+#F05+ & \color{#F05}{text} & \verb+#F0A+ & \color{#F0A}{text} & \verb+#F0F+ & \color{#F0F}{text}  \\
\hline
    \verb+#080+ & \color{#080}{text} & \verb+#085+ & \color{#085}{text} & \verb+#08A+ & \color{#08A}{text} & \verb+#08F+ & \color{#08F}{text}  \\
    \verb+#580+ & \color{#580}{text} & \verb+#585+ & \color{#585}{text} & \verb+#58A+ & \color{#58A}{text} & \verb+#58F+ & \color{#58F}{text}  \\
    \verb+#A80+ & \color{#A80}{text} & \verb+#A85+ & \color{#A85}{text} & \verb+#A8A+ & \color{#A8A}{text} & \verb+#A8F+ & \color{#A8F}{text}  \\
    \verb+#F80+ & \color{#F80}{text} & \verb+#F85+ & \color{#F85}{text} & \verb+#F8A+ & \color{#F8A}{text} & \verb+#F8F+ & \color{#F8F}{text}  \\
\hline
    \verb+#0F0+ & \color{#0F0}{text} & \verb+#0F5+ & \color{#0F5}{text} & \verb+#0FA+ & \color{#0FA}{text} & \verb+#0FF+ & \color{#0FF}{text}  \\
    \verb+#5F0+ & \color{#5F0}{text} & \verb+#5F5+ & \color{#5F5}{text} & \verb+#5FA+ & \color{#5FA}{text} & \verb+#5FF+ & \color{#5FF}{text}  \\
    \verb+#AF0+ & \color{#AF0}{text} & \verb+#AF5+ & \color{#AF5}{text} & \verb+#AFA+ & \color{#AFA}{text} & \verb+#AFF+ & \color{#AFF}{text}  \\
    \verb+#FF0+ & \color{#FF0}{text} & \verb+#FF5+ & \color{#FF5}{text} & \verb+#FFA+ & \color{#FFA}{text} & \verb+#FFF+ & \color{#FFF}{text}  \\
\hline\end{array}
$$
  • 显示：
    image

4.3.26 删除线

使用删除线功能必须声明 $$ 符号。

在公式内使用 \require{cancel} 来允许片段删除线的显示。
声明片段删除线后，使用 \cancel{字符}、\bcancel{字符}、\xcancel{字符} 和 \cancelto{字符} 来实现各种片段删除线效果。

  • 例子：
$$
\require{cancel}
\begin{array}{rl}
    \verb|y+\cancel{x}| & y+\cancel{x} \\
    \verb|\cancel{y+x}| & \cancel{y+x} \\
    \verb|y+\bcancel{x}| & y+\bcancel{x} \\
    \verb|y+\xcancel{x}| & y+\xcancel{x} \\
    \verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x} \\
    \verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\
\end{array}
$$
  • 显示：

image

使用 \require{enclose} 来允许整段删除线的显示。
声明整段删除线后，使用 \enclose{删除线效果}{字符} 来实现各种整段删除线效果。
其中，删除线效果有 horizontalstrike、verticalstrike、updiagonalstrike 和 downdiagonalstrike，可叠加使用。

  • 例子：
$$
\require{enclose}
\begin{array}{rl}
    \verb|\enclose{horizontalstrike}{x+y}| & \enclose{horizontalstrike}{x+y} \\
    \verb|\enclose{verticalstrike}{\frac xy}| & \enclose{verticalstrike}{\frac xy} \\
    \verb|\enclose{updiagonalstrike}{x+y}| & \enclose{updiagonalstrike}{x+y} \\
    \verb|\enclose{downdiagonalstrike}{x+y}| & \enclose{downdiagonalstrike}{x+y} \\
    \verb|\enclose{horizontalstrike,updiagonalstrike}{x+y}| & \enclose{horizontalstrike,updiagonalstrike}{x+y} \\
\end{array}
$$
  • 显示：

image

此外， \enclose 命令还可以产生包围的边框和圆等，参见 MathML Menclose Documentation 以查看更多效果。

  • 例子：

分别使用 circle 和 roundedbox 包围的公式

$$
\require{enclose}
\begin{array}{c}
    \enclose{circle}{f(\top),\, f^2(\top),\, f^3(\top) \,\cdots\, f^n(\top)} \\
    \enclose{roundedbox}{f(\bot),\, f^2(\bot),\, f^3(\bot) \,\cdots\, f^n(\bot)} \\
\end{array}
$$

使用 box 框住所有公式

$$
\require{enclose}
\enclose{box}{
    \begin{array}{c}
        f(\top),\, f^2(\top),\, f^3(\top) \,\cdots\, f^n(\top) \\
        f(\bot),\, f^2(\bot),\, f^3(\bot) \,\cdots\, f^n(\bot) \\
    \end{array}
}
$$
  • 显示：

分别使用 circle 和 roundedbox 包围的公式：
image

使用 box 框住所有公式：
image

4.4 数组和表格进阶

通常，一个格式化后的表格比单纯的文字或排版后的文字更具有可读性。
数组和表格均以 \begin{array} 开头，并在其后定义列数及每一列的文本对齐属性，c l r 分别代表居中、左对齐及右对齐。若需要插入垂直分割线，在定义式中插入 | ，若要插入水平分割线，在下一行输入前插入 \hline 。
与矩阵相似，每行元素间均须要插入 & ，每行元素以 \\ 结尾，最后以 \ end{array} 结束数组。
使用单个数组或表格时无需声明 $ 或 $$ 符号。

  • 例子：
\begin{array}{c|lcr}
    n & \text{左对齐} & \text{居中对齐} & \text{右对齐} \\
    \hline
    1 & 0.24 & 1 & 125 \\
    2 & -1 & 189 & -8 \\
    3 & -20 & 2000 & 1+10i \\
\end{array}
  • 显示：

image

嵌套的数组或表格**

多个数组\表格可 互相嵌套 并组成一组数组或表格。
使用嵌套前必须声明 $$ 符号。

  • 例子：
$$
\begin{array}{c} % 总表格
    \begin{array}{cc} % 第一行内分成两列
        \begin{array}{c|cccc} % 第一列"最小值"数组
            \text{min} & 0 & 1 & 2 & 3 \\
            \hline
            0 & 0 & 0 & 0 & 0 \\
            1 & 0 & 1 & 1 & 1 \\
            2 & 0 & 1 & 2 & 2 \\
            3 & 0 & 1 & 2 & 3 \\
        \end{array}
        &
        \begin{array}{c|cccc} % 第二列"最大值"数组
            \text{max} & 0 & 1 & 2 & 3 \\
            \hline
            0 & 0 & 1 & 2 & 3 \\
            1 & 1 & 1 & 2 & 3 \\
            2 & 2 & 2 & 2 & 3 \\
            3 & 3 & 3 & 3 & 3 \\
        \end{array}
    \end{array} % 第一行表格组结束
    \\
    \begin{array}{c|cccc} % 第二行 Delta 值数组
        \Delta & 0 & 1 & 2 & 3 \\
        \hline
        0 & 0 & 1 & 2 & 3 \\
        1 & 1 & 0 & 1 & 2 \\
        2 & 2 & 1 & 0 & 1 \\
        3 & 3 & 2 & 1 & 0 \\
    \end{array} % 第二行表格结束
\end{array} % 总表格结束
$$
  • 显示：

image

4.5 连分数

就像输入分式时使用 \frac 一样，使用 \cfrac 来创建一个连分数。

  • 例子：
$$
x = a_0 + \cfrac{1^2}{a_1 +
            \cfrac{2^2}{a_2 +
              \cfrac{3^2}{a_3 +
                \cfrac{4^4}{a_4 + 
                  \cdots
                }
              }
            }
          }
$$
  • 显示：

image

不要使用普通的 \frac 或 \over 来生成连分数，看起来会很奇怪。

  • 反例：
$$
x = a_0 + \frac{1^2}{a_1 +
            \frac{2^2}{a_2 +
              \frac{3^2}{a_3 +
                \frac{4^4}{a_4 + 
                  \cdots
                }
              }
            }
          }
$$
  • 显示：

image

当然，你可以使用 \frac 来表达连分数的紧缩记法。

  • 例子：
$$
x = a_0 + \frac{1^2}{a_1 +}
          \frac{2^2}{a_2 +}
          \frac{3^2}{a_3 +}
          \frac{4^4}{a_4 +}
          \cdots
$$
  • 显示：

image

连分数通常都太大以至于不易排版，所以建议在连分数前后声明 $$ 符号，或使用像 [a0,a1,a2,a3,…] 一样的紧缩记法。

4.6 交换图

使用一行 \require{AMScd} 语句来允许交换图表的显示。
声明交换图表后，语法与矩阵相似，在开头使用 \begin{CD}，在结尾使用 \ end{CD}，在中间插入图表元素，每个元素之间插入 & ，并在每行结尾处使用 \\。

  • 例子：
$$
\require{AMScd}
\begin{CD}
    A @>a>> B \\
    @V b V V\# @VV c V \\
    C @>>d> D \\
\end{CD}
$$
  • 显示：

image

其中，@>>> 代表右箭头、@<<< 代表左箭头、@VVV 代表下箭头、@AAA 代表上箭头、@= 代表水平双实线、@| 代表竖直双实线、@.代表没有箭头。
在 @>>> 的 >>> 之间任意插入文字即代表该箭头的注释文字。

  • 例子：
$$
\require{AMDcd}
\begin{CD}
    A @>>> B @>{\text{very long label}}>> C \\
    @. @AAA @| \\
    D @= E @<<< F \\
\end{CD}
$$
  • 显示：

image

在本例中，very long label 自动延长了它所在箭头以及对应箭头的长度，因而交换图表十分适合进行化学反应式的书写。

  • 例子：
$$
\require{AMDcd}
\begin{CD}
    \rm{RCOHR^{'}SO_3Na} @>{\large\text{Hydrolysis, $\Delta$, Dil.HCl}}>> \rm{(RCOR^{'})+NaCl+SO_2+ H_2O}
\end{CD}
$$
  • 显示：

image

4.7 绘制流程图

代码:

graph TB;
subgraph 分情况
A(开始)-->B{判断}
end
B--第一种情况-->C[第一种方案]
B--第二种情况-->D[第二种方案]
B--第三种情况-->F{第三种方案}
subgraph 分种类
F-.第1个.->J((测试圆形))
F-.第2个.->H>右向旗帜形]
end
H---I(测试完毕)
C--票数100---I(测试完毕)
D---I(测试完毕)
J---I(测试完毕)

代码说明：

image

  1. T、B、L、T分别是Top/Bottom/Left/Right的缩写
  2. id为节点的唯一标识，类似于变量。括号内为节点要显示的文字
  3. 单向箭头为流程进行方向。支持虚线与实线，有箭头与无箭头、有文字与无文字。分别是---、-.-、 -->、-.->、--文字-->、-.文字.->、--文字---、-.文字.-
  4. 支持子图。如代码、效果图所示。

效果：

graph TB; subgraph 分情况 A(开始)-->B{判断} end B--第一种情况-->C[第一种方案] B--第二种情况-->D[第二种方案] B--第三种情况-->F{第三种方案} subgraph 分种类 F-.第1个.->J((测试圆形)) F-.第2个.->H>右向旗帜形] end H---I(测试完毕) C--票数100---I(测试完毕) D---I(测试完毕) J---I(测试完毕)

4.8 绘制序列图

序列图共有5个部分，分别是：参与者、消息线、循环、选择、可选、并行、注解。

代码：

sequenceDiagram
Title: 小明买书

participant consumer as 小明
participant store as 书店
participant publisher as 出版社

consumer ->> store: 想买一本限量版书籍
store -->> consumer: 缺货
consumer ->> store: 隔一个月再次询问
store -->> consumer: 抢完了
loop 一个星期一次
consumer -x +store: 有货了吗
store --x -consumer: 正在订,有货马上通知你
end

store ->> publisher: 我要订购一批货
publisher --x store: 返回所有书籍的类别信息

alt 书籍类别符合要求
store ->> publisher: 请求书单信息
publisher --x store: 返回该类别书单信息
else 书单里的书有市场需求
store ->> publisher: 购买指定数据
publisher --x store: 确认订单
else 书籍不符合要求
store -->> publisher: 暂时不购买
end

par 并行执行
publisher ->> publisher : 生产
publisher ->> publisher : 销售
end

opt 书籍购买量>=500 && 库存>=50
publisher ->> store : 出货
store --x publisher : 确认收货
end

Note left of consumer : 图书收藏家
Note over consumer,store : 去书店购买书籍
Note left of store : 全国知名书店
Note over store,publisher : 去出版社进货
Note left of publisher : 持有版权的出版社

代码说明:

  1. 消息线
类型 描述
-> 无箭头的实线
--> 无箭头的虚线
->> 有箭头的实线(主动发出消息)
-->> 有箭头的虚线(响应)
-x 末端为X的实线(主动发出异步消息)
--x 有箭头的实线(以异步形式响应消息)

alt 可以理解为可替代的方案，可能的情况

opt 可以理解为一个 if 语句，满足条件下执行的操作

效果：

sequenceDiagram Title: 小明买书 participant consumer as 小明 participant store as 书店 participant publisher as 出版社 consumer ->> store: 想买一本限量版书籍 store -->> consumer: 缺货 consumer ->> store: 隔一个月再次询问 store -->> consumer: 抢完了 loop 一个星期一次 consumer -x +store: 有货了吗 store --x -consumer: 正在订,有货马上通知你 end store ->> publisher: 我要订购一批货 publisher --x store: 返回所有书籍的类别信息 alt 书籍类别符合要求 store ->> publisher: 请求书单信息 publisher --x store: 返回该类别书单信息 else 书单里的书有市场需求 store ->> publisher: 购买指定数据 publisher --x store: 确认订单 else 书籍不符合要求 store -->> publisher: 暂时不购买 end par 并行执行 publisher ->> publisher : 生产 publisher ->> publisher : 销售 end opt 书籍购买量>=500 && 库存>=50 publisher ->> store : 出货 store --x publisher : 确认收货 end Note left of consumer : 图书收藏家 Note over consumer,store : 去书店购买书籍 Note left of store : 全国知名书店 Note over store,publisher : 去出版社进货 Note left of publisher : 持有版权的出版社

4.9 绘制饼图

代码：

pie
 title Pie Chart
 "Dogs" : 386
 "cats" : 567
 "rabbit" : 700
 "pig":365
 "tiger" : 15

效果：

pie title Pie Chart "Dogs" : 386 "cats" : 567 "rabbit" : 700 "pig":365 "tiger" : 15

4.10 绘制甘特图

这里先介绍一下语法结构：

gantt
 dateFormat  YYYY-MM-DD    //底部的时间格式
 title     Adding GANTT diagram functionality to mermaid   //甘特图名称
 excludes   weekends               //周末有休息

 section A         //可以理解为一个功能模块
 task1        :done,des1, 2014-01-06,2014-01-08   //可以理解为这个功能模块的各项进度安排
 task2        :active,des2, 2014-01-09, 3d      //以下参数都是合法的
 task3        :des3, after des2, 5d          //我们等一下每个都试一下
 task4        :crit, done, 2014-01-06,24h
 task5        :crit, done, after des1, 2d
 task6        :crit, active, 3d
 task7        :crit, 5d
 task8        :2d
 task9        :1d
 ...         :[参数1:crit,可不填],[参数2:active,done,可不填表示待完成],[参数3:小名],
 [参数4:开始时间],[参数5:结束时间]
 section B
 section C 
 ...

样例代码：

gantt
 dateFormat  YYYY-MM-DD
 title     软件开发任务进度安排 
 excludes   weekends

 section 软硬件选型 
 硬件选择      :done,desc1, 2023-05-01,6w 
 软件设计      :active,desc2, after desc1,3w

 section 编码准备
 软件选择       :crit,done,desc3,2023-06-01,2023-06-29
 编码和测试软件   :1w
 安装测试系统    :2023-07-12,1w

 section 完成论文
 编写手册      :desc5,2024-03-01,10w
 论文修改      :crit,after desc3,3w
 论文定稿      :after desc5,3w

效果：

gantt dateFormat YYYY-MM-DD title 软件开发任务进度安排 excludes weekends section 软硬件选型 硬件选择 :done,desc1, 2023-05-01,6w 软件设计 :active,desc2, after desc1,3w section 编码准备 软件选择 :crit,done,desc3,2023-06-01,2023-06-29 编码和测试软件 :1w 安装测试系统 :2023-07-12,1w section 完成论文 编写手册 :desc5,2024-03-01,10w 论文修改 :crit,after desc3,3w 论文定稿 :after desc5,3w

五、Markdown工具

本地APP：首推 Typora，当然还有其他一些好用的软件，我用的是Typora；
国内博客平台：CSDN、简书、掘金、博客园、知乎等。
Typora下载链接：Typora下载

六、总结

快快把Markdown语法学起来吧，一起加油！！！

Markdown是一种纯文本标记语言 ↩︎

HyperText Markup Language 超文本标记语言 ↩︎

七、参考博文

  1. Mark Down公式指导手册
posted @ 2025-08-23 08:27  飞花阁  阅读(12)  评论(0)    收藏  举报
//雪花飘落效果