纳西妲的个人网站
Markdown语法教学

Markdown语法教学

2024-08-11
 
笔记   Markdown   教程  

众所周知，Github支持Markdown语法，但新程序员对此不能说不了解，只能说一点也不知情。

所以，纳西妲便编写了这篇帖子。

可能有错误或漏掉的地方，如果有请指出。

标题

那种大字都是怎么打出来的呢？他们都是Markdown的标题：

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
10
11
# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

其中，一二级标题还可以这样写（不推荐）：

MARKDOWN
1
2
3
4
5
一级标题
===

二级标题
---

注意：一到六级标题也可以用<h1>内容</h1>…<h6>内容</h6>的形式进行编写。

段落

段落的前后要有空行，所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用两个以上空格加上回车（引用中换行省略回车）。

比如：

段落1

段落二

我
换
行
了

源码：

MARKDOWN
1
2
3
4
5
6
7
8
段落1

段落二

我  
换  
行  
了

区块引用

在段落的每行或者只在第一行使用符号>，在区块引用中也可以使用区块引用，如下：

区块引用

区块引用

区块引用

区块引用

区块引用

区块引用

区块引用

区块引用

区块引用

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
> 区块引用
>
> > 区块引用
> >
> > > 区块引用
> > >
> > > > 区块引用
> > > >
> > > > > 区块引用
> > > > >
> > > > > > 区块引用
> > > > > >
> > > > > > > 区块引用
> > > > > > >
> > > > > > > > 区块引用
> > > > > > > >
> > > > > > > > > 区块引用

代码区块

代码区块以```或~~~开始和结束，也可以在每行最前面加上4个空格或者一个制表符（不推荐，因为这样无法指明代码高亮）

如下：

代码区块：

PLAINTEXT
1
fn main() {}

指定高亮：

RUST
1
fn main() {}

四个空格：

PLAINTEXT
1
fn main() {}

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
代码区块：

```
fn main() {}
```

指定高亮：

```rust
fn main() {}
```

四个空格：

    fn main() {}

字体效果

Markdown支持更改字体效果，如：

斜体

斜体

源码：

MARKDOWN
1
_斜体_

粗体

粗体

源码：

MARKDOWN
1
**粗体**

删除线

删除线

源码：

MARKDOWN
1
~~删除线~~

下滑线

下滑线

源码：

MARKDOWN
1
<ins>下滑线</ins>

超链接

超链接使用[文字](链接 "鼠标悬停在上面显示的文字（可选）")生成，如：

我的个人网站

我的博客

我的项目

源码：

MARKDOWN
1
2
3
4
5
[我的个人网站](https://nahida.im "My personal website")

[我的博客](https://nahida.im/blog "Blog")

[我的项目](https://nahida.im/project)

列表

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

无序列表

使用·、+、或-标记无序列表，和区块引用一样，无序列表也能嵌套，如：

  • 无序列表
    • 无序列表
      • 无序列表
        • 无序列表
          • 无序列表
            • 无序列表
              • 无序列表
                • 无序列表
                  • 无序列表

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
- 无序列表
  - 无序列表
    - 无序列表
      - 无序列表
        - 无序列表
          - 无序列表
            - 无序列表
              - 无序列表
                - 无序列表

有序列表

把第一个字符换成数字+.就行了，和无序列表一样，有序列表也能嵌套，如：

  1. 有序列表1
  2. 有序列表1
    1. 有序列表
    2. 有序列表
      1. 有序列表
      2. 有序列表
        1. 有序列表
        2. 有序列表
          1. 有序列表
          2. 有序列表

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
10
1. 有序列表1
2. 有序列表1
   1. 有序列表
   2. 有序列表
      1. 有序列表
      2. 有序列表
         1. 有序列表
         2. 有序列表
            1. 有序列表
            2. 有序列表

任务列表

任务列表允许您创建带有复选框的项目列表，如：

  • 起床
  • 吃饭
  • 睡觉

源码：

MARKDOWN
1
2
3
- [x] 起床
- [x] 吃饭
- [ ] 睡觉

分割线

分割线用三个或三个以上的-、*或_生成，如：

a

b

源码：

MARKDOWN
1
2
3
4
5
a

---

b

图片

图片使用![乱写](图片地址)添加，如：

web1

web2

web3

源码：

MARKDOWN
1
2
3
4
5
![web1](https://nahida.im/blog/Markdown使用教程/web1.png)

![web2](https://nahida.im/blog/Markdown使用教程/web2.png)

![web3](https://nahida.im/blog/Markdown使用教程/web3.png)

同样，图片也能使用超链接，如：

web1

web2

web3

源码：

MARKDOWN
1
2
3
4
5
[![web1](/blog/Markdown使用教程/web1.png)](https://nahida.im)

[![web2](/blog/Markdown使用教程/web2.png)](https://nahida.im/blog)

[![web3](/blog/Markdown使用教程/web3.png)](https://nahida.im/project)

标记

标记使用 ` 符号开始和结束，如：

Ctrl + c 可以复制选中的文字， 比如你选中了https://nahida.im，按下Ctrl + c，就会复制到剪切板

源码：

MARKDOWN
1
`Ctrl` + `c` 可以复制选中的文字， 比如你选中了`https://nahida.im`，按下`Ctrl` + `c`，就会复制到剪切板

表格

通过三个及以上的-字符创建标题，使用|分割每列，开头和结尾也要加上|

效果：

第1列第2列第3列
字符1.1字符2.1字符3.1
字符1.2字符2.2字符3.2
字符1.3字符2.3字符3.3
字符1.4字符2.4字符3.4

源码：

MARKDOWN
1
2
3
4
5
6
| 第1列   | 第2列   | 第3列   |
| ------- | ------- | ------- |
| 字符1.1 | 字符2.1 | 字符3.1 |
| 字符1.2 | 字符2.2 | 字符3.2 |
| 字符1.3 | 字符2.3 | 字符3.3 |
| 字符1.4 | 字符2.4 | 字符3.4 |

表格的对齐

在标题行-字符的左侧、右侧、两端添加:来将列中的文本向左、向右、居中对齐

效果：

左居中右
左对齐居中对齐右对齐
左对齐居中对齐右对齐
左对齐居中对齐右对齐
左对齐居中对齐右对齐

源码：

MARKDOWN
1
2
3
4
5
6
| 左     |   居中   |     右 |
| :----- | :------: | -----: |
| 左对齐 | 居中对齐 | 右对齐 |
| 左对齐 | 居中对齐 | 右对齐 |
| 左对齐 | 居中对齐 | 右对齐 |
| 左对齐 | 居中对齐 | 右对齐 |

上下标

使用<sup>内容</sup>表示上标（在少数编辑器中支持^文字^生成，Github不支持），使用<sub>内容</sub>表示下标（~下标~Github也不支持），如：

我最近拿别人的模板主题这个搭了个网站在这里

源码：

MARKDOWN
1
我最近拿别人的模板主题<sub>[这个](https://www.bilibili.com/video/BV1QM4m1276h)</sub>搭了个网站<sup>[在这里](https://nahida.im)</sup>

效果

使用<div 一些效果>开始一个效果的生效范围，</div>结束生效。

效果：

居左
居中
居右

源码：

MARKDOWN
1
2
3
<div align="left">居左</div>
<div align="center">居中</div>
<div align="right">居右</div>

标题也能这样用：

居左

居中

居右

源码：

MARKDOWN
1
2
3
<h3 align="left">居左</h3>
<h3 align="center">居中</h3>
<h3 align="right">居右</h3>

图片的高级用法

使用<picture>一些魔法</picture>来生成一张“高级”图片。

例如下面这张图片，在你Github主题为浅色时它是一个太阳，在你使用深色主题时它是月亮：

Shows an illustrated sun in light mode and a moon with stars in dark mode.

源码：

MARKDOWN
1
2
3
4
5
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://nahida.im/blog/Markdown使用教程/dark.png">
  <source media="(prefers-color-scheme: light)" srcset="https://nahida.im/blog/Markdown使用教程/light.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://nahida.im/blog/Markdown使用教程/light.png">
</picture>

内联HTML

你所看到的所有<标签>内容</标签>之类的语法都是HTML的语法，你可以在Markdown中使用绝大多数标准的HTML标签，如：

我的网站

这个字是粗体，这个字是斜体.

你甚至能混合使用Markdown和HTML

源码：

MARKDOWN
1
2
3
4
5
6
7
8
9
<a href="https://nahida.im">我的网站</a>

这个**字**是粗体，这个<em>字</em>是斜体.

<div align="center">

### 你甚至能混合使用Markdown和HTML

</div>

脚注

脚注允许您添加注释和参考文献，而不会弄乱文档的正文。创建脚注时，您添加脚注引用的位置会出现带有链接的上标编号。读者可以点击链接跳转至页面底部脚注内容。

要创建脚注引用，请在方括号 ( 1 ) 内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注与脚注本身相关联 - 显示起来，脚注按顺序编号。

效果：

Here’s a simple footnote,1 and here’s a longer one.2

源码：

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

Footnotes

  1. This is the first footnote. ↩ ↩2

  2. 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. ↩