鑫鑫又给大家带来了满满的干货~

Markdown 编辑器下载请自行去谷歌~

1.文本框

​```tex

Hello World

效果如下：

Hello World

2.表格

一、基本用法

First Header | Second Header | Third Header
------------ | ------------- | ------------
Content Cell | Content Cell  | Content Cell
Content Cell | Content Cell  | Content Cell

效果如下：

二、进阶用法

First Header | Second Header | Third Header |
:----------- | :-----------: | -----------: |
Left         | Center        | Right        |
Left         | Center        | Right        |

效果如下：

3.数学公式

首先确保你的 Markdown 编辑器支持并且已经可以使用 LaTeX 语法。

如果想让公式插在文字中，可以使用$，例如\$x^2\$，就是$x^2$。

一、上下标

^ 表示上标, _ 表示下标。如果上下标的内容多于一个字符，需要用 {} 将这些内容括成一个整体。上下标可以嵌套，也可以同时使用。

x^{y^z}=(1+{\rm e}^x)^{-2xy^w}

效果如下：

二、括号与分隔符

()、[]和|表示符号本身，使用{}来表示{}。当要显示大号的括号或分隔符时，要用\left和\right命令。

f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)

效果如下：

三、分数

通常使用\frac {分子} {分母}命令产生一个分数，分数可嵌套。

便捷情况可直接输入\frac ab来快速生成一个↓

如果分式很复杂，亦可使用分子 \over 分母命令，此时分数仅有一层。

\frac{a-1}{b-1} \quad and \quad {a+1\over b+1}

效果如下：

四、开方

使用\sqrt [根指数，省略时为2] {被开方数}命令输入开方。

\sqrt{2} \quad and \quad \sqrt[n]{3}

效果如下：

五、省略号

数学公式中常见的省略号有两种，\ldots表示与文本底线对齐的省略号，\cdots表示与文本中线对齐的省略号。

f(x_1,x_2,{\ldots} ,x_n) = x_1^2 + x_2^2 + {\cdots} + x_n^2

效果如下：

六、矢量

使用\vec{矢量}来自动产生一个矢量。也可以使用\overrightarrow等命令自定义字母上方的符号。

\overleftarrow{x \cdot y} \quad and \quad \overleftrightarrow{xy} \quad and \quad \overrightarrow{xy}

效果如下：

七、矩阵

Ⅰ 无框矩阵

在开头使用begin{matrix}，在结尾使用end{matrix}，在中间插入矩阵元素，每个元素之间插入& ，并在每行结尾处使用\ 。

\begin{matrix}

1 & x & x^2 \\

1 & y & y^2 \\

1 & z & z^2 \\

\end{matrix}

效果如下：

Ⅱ 边框矩形

在开头将matrix替换为pmatrix bmatrix Bmatrix vmatrix Vmatrix。

\begin{matrix} 1 & 2 \\ 3 & 4 \\ \end{matrix}

\begin{pmatrix} 1 & 2 \\ 3 & 4 \\ \end{pmatrix}

\begin{bmatrix} 1 & 2 \\ 3 & 4 \\ \end{bmatrix}

\begin{Bmatrix} 1 & 2 \\ 3 & 4 \\ \end{Bmatrix}

\begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix}

\begin{Vmatrix} 1 & 2 \\ 3 & 4 \\ \end{Vmatrix}

效果如下：

PS：输入<br>，可以实现加入空行。

八、常用符号

以下是一些常用符号。

Ⅰ 转义字符

Ⅱ 希腊字母

Ⅲ 字形设置

Ⅳ 其他

九、在 GitHub 上使用 LaTeX 语法

了解了这么多 LaTeX 语法，在 GitHub 上不能敲，这可咋整？

所以这个时候就要请出 Codecogs 了！

但进去一看，emm… 这好像也没啥用啊！

不不不，你需要调用另外一个 Codecogs 网址：https://latex.codecogs.com/gif-latex? + LaTeX语法代码，然后用 Markdown 图片语法显示。

例如：

![](https://latex.codecogs.com/gif-latex?\frac%20ab)

效果如下：

哦对了，本博客已经在全站头部文件引入了 MathJax，所以不需要使用 Codecogs 。

Codecogs 的效果没有 MathJax 好，清晰度比 MathJax 低，肉眼可见。

PS：空格需要替换为%20

4.代码

​```python

print('Hello,World!')

效果如下：

print('Hello,World!')

5.短代码

如果有个函数或者片段代码，可以使用反引号(`)把它括起来。

`<br>`

效果如下：

<br>

6.内联图片

![301a84df07386.jpg](https://s1.imagehub.cc/images/2022/12/21/b643b51209ebcc28a90f85945317b413.png)

效果如下：

7.超链接

[MacWinLin 工作室博客](https://macwinlin.github.io)

效果如下：

MacWinLin 工作室博客

8.待办列表

- [x] 上学

- [ ] 不上学

效果如下：

• 1

• 2

9.标题

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

效果……懒得试了请自行前往我的云盘或访问蓝奏云链接。

10.段落

没错，你看到的这行字也是段落。

一个段落

效果如下：

一个段落

没错，就这么简单。

注意事项

换行请在两个段落之间空一行，或在段落后加 2 个空格；

否则两行将被识别为一行。

11.加粗、斜体和删除线

越来越像复杂版 Word 了……

一、加粗

This is **bold**.

效果如下：

This is bold.

二、斜体

This is *italic*.

效果如下：

This is italic.

不过这样也是可以的：

This is _italic_

效果和上面的一模一样，选择哪个看你自己。

三、斜体并加粗

This is **_bold and italic_**.

效果如下：

This is bold and italic.

注意：***bold and italic***也是可行的，但建议使用**_bold and italic_**，除非这个用不了。

四、删除线

This is ~~delete~~

效果如下：

This is delete.

12.列表

列表分为有序列表和无序列表。

一、有序列表

要创建有序列表，请在每个列表项前添加数字并紧跟一个英文句点。 数字不必按数学顺序排列，但是列表应当以数字 1 起始。

1. First item

2. Second item

3. Third item

4. Fourth item

效果如下：

1. First item

2. Second item

3. Third item

4. Fourth item

二、无序列表

要创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。 缩进一个或多个列表项可创建嵌套列表。

- First item

- Second item

- Third item

- Fourth item

效果如下：

• First item

• Second item

• Third item

• Fourth item

13.引用

> Number One

效果如下：

Number One

一、多个段落一起引用

可以一起引用多个段落。

> First item
>
> Second item

效果如下：

First item

Second item

二、嵌套

引用也可以嵌套，在嵌套的段落前加上>>即可

> First item
>
> > Second item

效果如下：

First item

Second item

三、引用其他元素

引用可以包含其他 Markdown 格式的元素。 并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。

> #### 标题
>
> - Frist item
> - Second item
> - Third item
>
> *italic*&**bold**
>
> ***bold and italic***

效果如下：

标题

• Frist item
• Second item
• Third item

italic&bold

bold and italic

14.分隔线

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

*********

---------

_________

效果如下：

15.转义字符

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 \ 。

\* 如果没有反斜杠，这是一个无序列表。

效果如下：

* 如果没有反斜杠，这是一个无序列表。

可做转义的字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

• \

• `

• *

• _

• {}

• []

• ()

• #

• -

• .

• !

• |

16.折叠内容

根据Markdown中可以嵌套HTML语法的特性，我们可以做出折叠文本。

一、折叠文本

<details>

<summary>折叠文本</summary>

1+1=1

2+2=4

</details>

效果如下：

二、折叠代码块

<details>

<summary>折叠代码块</summary>

<pre><blockcode>

System.out.println('折叠的代码块')

</blockcode></pre>

</details>

效果如下：

System.out.println('折叠的代码块')

17.Mermaid 语法

Mermaid 真神奇，这仅仅只是一部分 Mermaid 语法而已。

此部分有引用的内容。

更多 Mermaid 语法请参考 这里。

一、流程图

​```mermaid
graph TD;
A-->B;
B-->C;

效果如下：

二、序列图

​```mermaid
sequenceDiagram
A->> B: 吃饭了吗？
B->> A: 刚吃完饭了。

效果如下：

三、甘特图

​```mermaid
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目A
任务1 :a1, 2019-01-01, 150d
任务2 :after a1, 30d
section 项目B
任务3 :2019-02-01, 60d
任务4 :30d

效果如下：

四、类图

 ```mermaid
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
    +String beakColor
    +swim()
    +quack()
}
class Fish{
    -int sizeInFeet
    -canEat()
}
class Zebra{
    +bool is_wild
    +run()
}

效果如下：

五、状态图

​```mermaid  
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

效果如下：

六、实体关系图

 ```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

七、用户旅程图

 ```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

效果如下：

八、饼图

 ```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

效果如下：

九、象限图

 ```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

效果如下：

十、Gitgraph (Git) 图

 ```mermaid
 gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

效果如下：

十一、思维导图

 ```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

效果如下：

十二、时间线图

 ```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

效果如下：

十三、XYChart

 ```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

效果如下：

博客的 Mermaid

此部分与 Markdown 学习无关

我这个博客，在很长的一段时间（从博客建立〔2021.7〕到 2023.4）里，都没有 Mermaid。因为当时不熟悉博客的代码结构，就是套模板，因此一直都没加 Mermaid.js。

后来，我开始了解代码结构，最开始是 Lemon 的博客，按着 TA 的教程整了一个博客，后来好像又整了一个 Gridea（2022.1——？），但是好像因为网络问题同步不到 GitHub，犹豫了好久最终决定放弃。

然后就是这个模板，其实 Lemon 的博客也是根据这个模板改的。LOFFER ，改了主题色，根据 Lemon 的教程加搜索框，加社交链接图标，加网站计数。LOFFER 自带 MathJax 了，我后来在全站头部文件里又引入了 Mermaid.js。

很漫长，没想到跌跌撞撞已经一年半多了。（2023.4.24）

完