Skip to content

MarkDown

简介

Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。

基本语法

构建状态 徽章

Build Status

Build Status
md
[![Build Status](https://img.shields.io/github/workflow/status/Ms-150/blog/CI)](https://github.com/Ms-150/blog/actions)

<a href="https://github.com/Ms-150/blog/actions" target="_blank" rel="noreferrer">
    <img src="https://img.shields.io/github/workflow/status/Ms-150/blog/CI" alt="Build Status">
</a>

生成徽章的网站 https://shields.io/

标题语法

一级标题

```md
# 一级标题
```

二级标题

```md
## 二级标题
```

三级标题

```md
### 三级标题
```

四级标题

```md
#### 四级标题
```
五级标题
```md
##### 五级标题
```
六级标题
```md
###### 六级标题
```

字体语法

  • 加粗

    md
    **加粗**
  • 斜体

    md
    _斜体_
  • 加粗倾斜体

    md
    **_加粗倾斜体_**
  • 删除线

    md
    ~~删除线~~
  • 下划线

    md
    <u>下划线</u>
  • 脚注

    正文^1

    md
    正文[^1]。
    [^1]: 脚注的内容,鼠标滑入显示。
    
    <!-- 注释// 脚注标识符必须是数字 -->
  • md
    <font color="red">红色字体</font>

段落语法

蓝色字体的段落.

md
<p style="color: blue">蓝色字体的段落.</p>

换行符

  • 两个空格
  • 空一行
  • <br>

段落后面 两个空格加回车 表示换行

空一行 表示新的段落

This is the first line.
And this is the second line.

md
<p>This is the first line.<br>
And this is the second line.</p>

This is the first line.`  `
And this is the second line.

This is the first line.

And this is the second line.

列表语法

无序列表

  • 第一项
  • 第二项
  • 第一项
  • 第二项
  • 第一项
  • 第二项
md
- 第一项
- 第二项

* 第一项
* 第二项

- 第一项
- 第二项

<!-- 注释 + - * 都可以  -->

有序列表

  1. 第一项
  2. 第二项
  • 第 1 项
    • 第 1-1 项
      • 第 1-1-1 项
md
1. 第一项
2. 第二项

- 第 1 项
  - 第 1-1 项
    - 第 1-1-1 项

引用语法

  • 块引用

  • 块引用

  • 嵌套块引用

代码语法

``

At the command prompt, type nano.

md
At the command prompt, type `nano`.

代码块

`tab键` 也可以生成代码块
console.log('这是一个代码块!')
bash
cd app
npm i
node app
diff
+ console.log('diff语法高亮')
- console.log('这是一个代码块!')
json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

链接

  • 百度 / https://www.baidu.com

    md
    [链接名](链接地址)
    <https://www.baidu.com>
  • 高级链接1,通过变量来设置一个链接,变量赋值在文档末尾进行。

    md
    高级链接[1],通过变量来设置一个链接,变量赋值在文档末尾进行。
    [1]: www.baidu.com
  • 点击跳转到高级技巧部分.

    md
    点击跳转到[高级技巧](#高级技巧)部分.

邮箱

fake@example.com

md
<fake@example.com>

分割线


md
---

图片

  • alt 属性

    md
    ![alt 属性](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "百度")
    
    <!-- 注释// 无法调整高度与宽度 -->
  • md
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="30%" height="30%">

表格

表头展示默认左对齐
单元格单元格单元格
md
| 表头   | 展示   | 默认左对齐 |
| ------ | ------ | ---------- |
| 单元格 | 单元格 | 单元格     |
表头展示对其方式
左对齐居中对齐右对齐
md
| 表头   |   展示   | 对其方式 |
| :----- | :------: | -------: |
| 左对齐 | 居中对齐 |   右对齐 |

任务列表

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

高级技巧

支持的 HTML 元素转义字符 \

字符元素
\反斜线
`反引号
* 星号
_下划线
{}花括号
[]方括号
()小括号
#井号
+加号
-减号
.英文句点
!感叹号

// 注:复制到本地保存 .md 文件,vscode 打开 即可查看效果

上标 <sup> 下标 <sub>

  • X2
  • H2O
md
X<sup>2</sup>
H<sub>2</sub>O

扩展

代码组

html
js

自定义容器

  • 默认标题

    INFO

    This is an info box.

    TIP

    This is a tip.

    WARNING

    This is a warning.

    DANGER

    This is a dangerous warning.

    Details

    This is a details block.

  • 自定义标题

    STOP

    危险区域,请勿继续

    点我查看代码
    js
    console.log("Hello, VitePress!");

GitHub 风格的警报

NOTE

强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

有助于用户更顺利达成目标的建议性信息。

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险,所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

Released under the MIT License.