maximus's blog
0%

Markdown拓展语法学习

发表于 更新于 分类于
本文字数： 7.4k 阅读时长 ≈ 7 分钟

设计字体、字号和颜色

1
<font face='黑体' color=#ff0000 size=4>我是正文</font>

我是正文

RGB颜色值与十六进制颜色码对照表

分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* * *  
***  
**********  
- - -  
_________________  
```  

效果如下：
* * *  
***  
**********  
- - -  
_________________  


# 为文字添加背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）。 语法：

```text  
<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>  
```  

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>  


# 设置文字居中

```text  
<center>居中</center>  
<p align="left">左对齐</p>  
<p align="right">右对齐</p>  
```  

效果如下：
<center>居中</center>  
<p align="left">左对齐</p>  
<p align="right">右对齐</p>  


# 加入上下标

使用HTML中下标下标的语法即可, 语法：

```text  
H<sub>2</sub>O  CO<sub>2</sub>  
爆米<sup>TM</sup>  
```  

H<sub>2</sub>O  CO<sub>2</sub>  
爆米<sup>TM</sup>

一些Markdown处理器允许您创建术语及其对应定义的_定义列表_。要创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

1
2
3

HTML看起来像这样：


First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

呈现的输出如下所示：

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.


# 公式

**Markdown Preview Enhanced** 使用 [KaTeX](https://github.com/Khan/KaTeX) 或者 [MathJax](https://github.com/mathjax/MathJax) 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认下的分隔符：

  • $...$ 或者 \(...\) 中的数学表达式将会在行内显示。
  • $$...$$ 或者 \[...\] 或者 ``math ` 中的数学表达式将会在块内显示。
    1
    2
    3

    ![](https://www.runoob.com/wp-content/uploads/2019/03/0e408954-fda8-11e5-9eb4-562d7c0ca431.gif)

    $$
    \begin{Bmatrix}
    a & b \
    c & d
    \end{Bmatrix}
    $$
    $$
    \begin{CD}
    A @>a>> B \
    @VbVV @AAcA \
    C @= D
    \end{CD}
    $$
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    输出结果为：

    $$
    \begin{Bmatrix}
    a & b \\
    c & d
    \end{Bmatrix}
    $$
    $$
    \begin{CD}
    A @>a>> B \\
    @VbVV @AAcA \\
    C @= D
    \end{CD}
    $$

    $$
    \begin{pmatrix}
    1 & a_1 & a_1^2 & \cdots & a_1^n \\
    1 & a_2 & a_2^2 & \cdots & a_2^n \\
    \vdots & \vdots & \vdots & \ddots & \vdots \\
    1 & a_m & a_m^2 & \cdots & a_m^n \\
    \end{pmatrix}
    $$


    # 画流程图、时序图、甘特图
    ## 1、横向流程图源码格式

    graph LR
    A[方形] –>B(圆角)
    B –> C{条件a}
    C –>|a=1| D[结果1]
    C –>|a=2| E[结果2]
    F[横向流程图]
    1
    2
    3

    ## 2、竖向流程图源码格式

    graph TD
    A[方形] –> B(圆角)
    B –> C{条件a}
    C –> |a=1| D[结果1]
    C –> |a=2| E[结果2]
    F[竖向流程图]
    1
    2
    3

    ## 3、UML标准时序图样例

    %% 时序图例子,-> 直线，–>虚线，->>实线箭头
    sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
    王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物
    看医生…
    李四–>>张三: 很好!
    王五->李四: 你怎么样?
    李四–>王五: 很好!
    1
    2
    3

    ## 4、甘特图样例

    %% 语法示例
    gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
需求                      :done,    des1, 2014-01-06,2014-01-08
原型                      :active,  des2, 2014-01-09, 3d
UI设计                     :         des3, after des2, 5d
    未来任务 : des4, after des3, 5d
    section 开发
学习准备理解需求                      :crit, done, 2014-01-06,24h
设计框架                             :crit, done, after des2, 2d
开发                                 :crit, active, 3d
未来任务                              :crit, 5d
耍                                   :2d
section 测试
功能测试                              :active, a1, after des3, 3d
压力测试                               :after a1  , 20h
测试报告                               : 48h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13


    # 效果图如下

    ## 1、横向流程图源码格式

    ```mermaid
    graph LR
    A[方形] -->B(圆角)
        B --> C{条件a}
        C -->|a=1| D[结果1]
        C -->|a=2| E[结果2]
        F[横向流程图]

2、竖向流程图源码格式

1
2
3
4
5
6
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

3、UML标准时序图

1
2
3
4
5
6
7
8
9
10
11
12
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

4、甘特图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
timeline LR
    title GPT-Academic项目发展历程
    section 2.x
        1.0~2.2: 基础功能: 引入模块化函数插件: 可折叠式布局: 函数插件支持热重载
        2.3~2.5: 增强多线程交互性: 新增PDF全文翻译功能: 新增输入区切换位置的功能: 自更新
        2.6: 重构了插件结构: 提高了交互性: 加入更多插件
    section 3.x
        3.0~3.1: 对chatglm支持: 对其他小型llm支持: 支持同时问询多个gpt模型: 支持多个apikey负载均衡
        3.2~3.3: 函数插件支持更多参数接口: 保存对话功能: 解读任意语言代码: 同时询问任意的LLM组合: 互联网信息综合功能
        3.4: 加入arxiv论文翻译: 加入latex论文批改功能
        3.44: 正式支持Azure: 优化界面易用性
        3.46: 自定义ChatGLM2微调模型: 实时语音对话
        3.49: 支持阿里达摩院通义千问: 上海AI-Lab书生: 讯飞星火: 支持百度千帆平台 & 文心一言
        3.50: 虚空终端: 支持插件分类: 改进UI: 设计新主题
        3.53: 动态选择不同界面主题: 提高稳定性: 解决多用户冲突问题
        3.55: 动态代码解释器: 重构前端界面: 引入悬浮窗口与菜单栏
        3.56: 动态追加基础功能按钮: 新汇报PDF汇总页面
        3.57: GLM3, 星火v3: 支持文心一言v4: 修复本地模型的并发BUG
        3.60: 引入AutoGen
        3.70: 引入Mermaid绘图: 实现GPT画脑图等功能
        3.80(TODO): 优化AutoGen插件主题: 设计衍生插件

脚注

脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。

要创建脚注参考，请在方括号（[^1]）内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注参考与脚注本身相关联-在输出中，脚注按顺序编号。

在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本（[^1]: My footnote.）。您不必在文档末尾添加脚注。您可以将它们放在除列表，块引号和表之类的其他元素之外的任何位置。

1
2
3
4
5
6
7
8
9
10
11
Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

呈现的输出如下所示：

Here’s a simple footnote,[^1] and here’s a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here’s one with multiple paragraphs and code.

1
2
3
4
5
Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

任务列表

任务列表使您可以创建带有复选框的项目列表。在支持任务列表的Markdown应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。要选择一个复选框，请在方括号[x]之间添加 x 。

1
2
3
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

呈现的输出如下所示：

  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

删除线

您可以通过在单词中心放置一条水平线来删除单词。结果看起来像这样。此功能使您可以指示某些单词是一个错误，要从文档中删除。若要删除单词，请在单词前后使用两个波浪号~~。

1
~~世界是平坦的。~~ 我们现在知道世界是圆的。

呈现的输出如下所示：

世界是平坦的。 我们现在知道世界是圆的。

使用 Emoji 表情

有两种方法可以将表情符号添加到Markdown文件中：将表情符号复制并粘贴到Markdown格式的文本中，或者键入emoji shortcodes。

复制和粘贴表情符号

在大多数情况下，您可以简单地从Emojipedia (opens new window)等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

Tip: 如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。.

使用表情符号简码

一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。

1
2
3
去露营了！ :tent: 很快回来。

真好笑！ :joy:

呈现的输出如下所示：

去露营了！⛺很快回来。

真好笑！😂

Note: 注意：您可以使用此表情符号简码列表，但请记住，表情符号简码因应用程序而异。有关更多信息，请参阅Markdown应用程序的文档。

围栏代码块

Markdown基本语法允许您通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便，请尝试使用受保护的代码块。根据Markdown处理器或编辑器的不同，您将在代码块之前和之后的行上使用三个反引号（(`` `）或三个波浪号（~~~）。

1
2
3
4
5
6
7
```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

呈现的输出如下所示：

1
2
3
4
5
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Tip:要在代码块中显示反引号？请参阅了解如何转义它们。

语法高亮

许多Markdown处理器都支持受围栏代码块的语法突出显示。使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的反引号旁边指定一种语言。

1
2
3
4
5
6
7
```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

呈现的输出如下所示：

{ “firstName”: “John”, “lastName”: “Smith”, “age”: 25 }

自动网址链接

许多Markdown处理器会自动将URL转换为链接。这意味着如果您输入http://www.example.com，即使您未[使用方括号](https://markdown.com.cn/basic-syntax/links.html)，您的Markdown处理器也会自动将其转换为链接。

1
http://www.example.com

呈现的输出如下所示：

http://www.example.com(opens new window)

禁用自动URL链接

如果您不希望自动链接URL，则可以通过将URL表示为带反引号的代码来删除该链接。

1
`http://www.example.com`

呈现的输出如下所示：

http://www.example.com