Markdown 语法备忘

last modify

• 基本语法

  • 表格

  • 参考链接 (Reference-style Links)

• 扩展语法

  • 表格 (Table)

  • 注脚 (Footnotes)

  • 下标 (Subscript)

  • 上标 (Superscript)

  • 任务列表 (Task Lists)

  • 高亮 (Highlight)

• 其他编辑技巧

  • 元素居中

  • 目录块 (类似 tree 命令生成)

  • 换行

  • 图片 (HTML)

  • 隐藏块

  • 表格 (HTMl)

• Latex

  • 引用

  • 对齐

• VSCode 插件

  • 自动更新目录插件

基本语法

Basic Syntax | Markdown Guide

表格

参考链接 (Reference-style Links)

[hobbit-hole][1]

<!-- 以下等价 -->

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

hobbit-hole

在预览界面, 引用内容会被隐藏

扩展语法

Extended Syntax | Markdown Guide

并非所有 Markdown 程序都支持扩展语法

表格 (Table)

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

Syntax	Description
Header	Title
Paragraph	Text

注脚 (Footnotes)

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, and here's a longer one.

在预览界面, 注脚内容会被转移到文档末尾; 如果注脚内容没有被任何地方引用, 则会被隐藏;

1. 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.

下标 (Subscript)

H~2~O

等价 HTML 语法

H<sub>2</sub>O

H2O

上标 (Superscript)

GitHub 暂不支持

X^2^

等价 HTML 语法

X<sup>2</sup>

X2

任务列表 (Task Lists)

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

• Write the press release

• Update the website

• Contact the media

高亮 (Highlight)

I need to highlight these ==very important words==.

等价 HTML 语法

I need to highlight these <mark>very important words</mark>.

I need to highlight these very important words.

其他编辑技巧

元素居中

<!-- 通用 -->
<div align="center">
    content
</div>

<!-- GitHub 上不生效 -->
<div style="text-align: center;">
    content
</div>

content

目录块 (类似 tree 命令生成)

project
├── src/
│   ├── assets/                    // 静态资源目录
│   ├── common/                    // 通用类库目录
│   ├── components/                // 公共组件目录
│   ├── store/                     // 状态管理目录
│   ├── utils/                     // 工具函数目录
│   ├── App.vue
│   └── main.ts
├── tests/                         // 单元测试目录
├── index.html
└── package.json

换行

• 法1）在行末手动插入 <br/>；

• 法2）在行末添加两个空格；

图片 (HTML)

• 不带链接

  <img src="..." height="300" />

• 带链接

  <a href=""><img src="..." height="300" /></a>

  • height用于控制图片的大小，一般不使用，图片会等比例缩放；

• 居中

  <div align="center"><img src="..." height="300" /></div>

隐藏块

<details><summary><b>点击展开</b></summary> 

// 代码块，注意上下都要保留空行

</details>
<br/> <!-- 如果间隔太小，可以加一个空行 -->

点击展开

// 代码块，注意上下都要保留空行

表格 (HTMl)

<table style="width:80%; table-layout:fixed;">
    <tr>
        <th>th1</td>
        <th>th2</td>
    </tr>
    <tr>
        <td>td1</td>
        <td>td2</td>
    </tr>
</table>

th1	th2
td1	td2

Latex

为确保在 GitHub 上生效, 在块前后增加空格或空行

行内 $a+b=3$ 公式 (保证块前后有空格)

行内$a+b=3$公式 (没有空格可能会在一些解释器上失效)

单行居中 (保证块前后有空行, 否则可能在一些解释器上失效)

$$
    a+b=3
$$

> 更多语法见 [Latex 备忘](./LaTeX备忘.md)

行内 $a+b=3$ 公式 (保证块前后有空格)

行内$a+b=3$公式 (没有空格可能在一些解释器上可能失效)

单行居中 (保证块前后有空行, 否则可能在一些解释器上可能失效)

$$a+b=3$$

更多语法见 Latex 备忘

引用

非标准用法，在编辑时不支持跳转，但是转换成 HTML 页面后可以；

推荐使用注脚

百度[$^{[1]}$](#ref1)是一种搜索引擎

<a name="ref1"> $[1]$ </a> [百度一下](https://www.baidu.com) <br/>

百度[$^{1}$](#ref1)是一种搜索引擎

$1$ 百度一下

对齐

$$
\begin{aligned}
    a &= 1 \\
    b &= 2
\end{aligned}
$$

$$\begin{aligned} a &= 1 \\ b &= 2 \end{aligned}$$

VSCode 插件

自动更新目录插件

• 插件名称：Markdown All in One

• 插入目录快捷键： Shift + Command + P (Create Table of Contents)