Markdown 基础示例

标题

markdown

# 一级标题 H1

# 一级标题 H1

## 二级标题 H2

### 三级标题 H3

#### 四级标题 H4

##### 五级标题 H5

###### 六级标题 H6

普通段落

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

普通段落

加粗

markdown

**加粗文字**

加粗文字

斜体

markdown

_斜体文字_

斜体文字

下划线

markdown

<u>下划线</u>

下划线

删除线

markdown

~~删除线~~

~~删除线~~

高亮

安装 `markdown-it-mark` 插件

地址：https://github.com/markdown-it/markdown-it-mark

shell

pnpm add markdown-it-mark

配置

config.mts

import markdownItMark from 'markdown-it-mark';

export default defineConfig({
	markdown: {
		config: md => {
			md.use(markdownItMark); // 启用 markdown-it-mark 文字高亮插件插件
		},
	},
});

修改样式

custom.css

css

mark {
	padding: 2px 4px;
	border-radius: 4px;
	color: #fff;
	background-color: #3884ff;
}

使用

markdown

==高亮==

高亮

表格

markdown

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

公式

内联公式

markdown

$$
\begin{matrix}
1 & 2 & 3\\
4 & 5 & 6\\
7 & 8 & 9\\
\end{matrix}
$$

\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{matrix}

mathjax3 插件公式

点击查看引用 mathjax3 插件。点击跳转

数学公式

安装 markdown-it-mathjax3

地址：https://github.com/tani/markdown-it-mathjax3

bash

pnpm add markdown-it-mathjax3 -D

配置使用

config.mts

export default defineConfig({
	markdown: {
		math: true, // 支持数学公式
	},
});

$$
\begin{aligned}
f(x) &= (x+1)^2\\
&= x^2 + 2x + 1
\end{aligned}
$$

\begin{aligned} f (x) & = (x + 1)^{2} \\ = x^{2} + 2 x + 1 \end{aligned}

markdown

\begin{aligned}
f(x) &= (x+1)^2\\
&= x^2 + 2x + 1
\end{aligned}

\begin{aligned} f (x) & = (x + 1)^{2} \\ = x^{2} + 2 x + 1 \end{aligned}

代码块

普通代码块

```js
export default {
	data() {
		return {
			msg: 'Highlighted!',
		};
	},
};
```

export default {
	data() {
		return {
			msg: 'Highlighted!',
		};
	},
};

高亮代码块

提醒

单行：例如 {4}
多行：例如 {5-8}、{3-10}、{10-17}
多个单行：例如 {4,7,9}
多行与单行：例如 {4,7-13,16,23-27,40}
也可以使用 // [!code highlight] 注释实现行高亮。

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!',

      tttle: '标题',
    }
  }
}
```

export default {
  data () {
    return {
      msg: 'Highlighted!',

      tttle: '标题', 
    }
  }
}

聚焦代码块

提醒

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!!code focus]
    }
  }
}
```

export default {
	data() {
		return {
			msg: 'Focused!', 
		};
	},
};

代码块中的颜色差异

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!!code --]
      msg: 'Added' // [!!code ++]
    }
  }
}
```

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

高亮“错误”和“警告”

```js
export default {
  data () {
    return {
      msg: 'Error', // [!!code error]
      msg: 'Warning' // [!!code warning]
    }
  }
}
```

export default {
	data() {
		return {
			msg: 'Error', 
			msg: 'Warning', 
		};
	},
};

行号

注意

由于设置了全局显示行号lineNumbers: true(默认是禁用行号lineNumbers: false)，所以无法禁用行号。

// 默认禁用行号
const line2 = 'This is line 2';
const line3 = 'This is line 3';

// 行号已启用，并从第2行开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'

提示框

VitePress 风格提示框

markdown

::: info 信息
这是一个信息框。
:::

::: tip 建议
这是一个建议框。
:::

::: warning 警告
这是一个警告框。
:::

::: danger 危险提示
这是一个危险提示框。
:::

::: details 点击查看详情
这是一个详情块。
:::

信息

这是一个信息框。

建议

这是一个建议框。

警告

这是一个警告框。

危险提示

这是一个危险提示框。

点击查看详情

这是一个详情块。

GitHub 风格的提示框

markdown

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

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

> [!INFO] 一般信息
> 一般信息，可以用于一般用户的说明。

> [!DANGER]
> 慎重修改可能导致的危险。

> 普通引用块

提醒

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

建议

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

重点

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

警告

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

注意

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

一般信息

一般信息，可以用于一般用户的说明。

危险

慎重修改可能导致的危险。

普通引用块

有序列表

markdown

1. 第一条
2. 第二条
3. 第三条

第一条
第二条
第三条

无序列表

markdown

-   第一条
-   第二条
-   第三条

第一条
第二条
第三条

任务列表

安装 `markdown-it-task-checkbox` 插件

地址：https://github.com/linsir/markdown-it-task-checkbox

shell

pnpm add markdown-it-task-checkbox

配置

config.mts

import markdownItTask from 'markdown-it-task-checkbox';

export default defineConfig({
	markdown: {
		config: md => {
			md.use(markdownItTask, {
				disabled: true, // 是否禁用
				divWrap: true, // 是否在 div 中包裹
				divClass: 'custom-checkbox', // div包装器的类名。仅在启用divWrap时使用
				idPrefix: 'cbx_', // 复选框输入的ID包含前缀和从0开始的递增数字
				ulClass: 'task-list-ul', // ul wrapper的classname
				liClass: 'task-list-li', // li wrapper的classname
			}); // 启用 markdown-it-mark 文字高亮插件插件
		},
	},
});

修改样式

点击查看修改复选框的样式

custom.css

css

/* 设置未选中样式 */
.custom-checkbox input[type='checkbox'] {
	position: relative;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border: 1px solid #949494;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 4px;

	/* 取消默认样式 */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}
/* 设置选中样式 */
.custom-checkbox input[type='checkbox']:checked {
	background-color: #3884ff;
	border: 1px solid #3884ff;
}
/* 设置选中样式的文字 */
.custom-checkbox input[type='checkbox']:checked + label {
	color: #3884ff;
}
/* 设置选中样式的对号√ */
.custom-checkbox input[type='checkbox']:checked::after {
	content: '\2714';
	display: block;
	position: absolute;
	top: 0;
	color: #fff;
	font-size: 16px;
	text-align: center;
	width: 100%;
	line-height: 18px;
}

markdown

-   [ ] 未完成任务
-   [x] 已完成任务

未完成任务
已完成任务

水平分割线

markdown

---

图片

Markdown 格式 `![alt](src)`

markdown

![1680761702337.jpg](https://cdn.jsdelivr.net/gh/dcdy/image/img/1680761702337.jpg)

HTML 格式 `<img src="src" alt="alt" />`

markdown

<img src="https://cdn.jsdelivr.net/gh/dcdy/image/img/1680761702337.jpg" alt="首页配置图片" />

超链接

外部链接

markdown

[点击打开百度页面](https://www.baidu.com/index.htm)

点击打开百度页面

内部链接

markdown

<!-- 将用户锚定到目录 guide 下的config-home.md文件中的标题"主题内容"上 -->

[跳转到文档配置页面内的主题内容](../guide/config-home.md#主题内容)

<!-- 将用户锚定到api.md文件 -->

[跳转到 API 页面](./api.md) <!-- 可以省略扩展名 -->

跳转到文档配置页面内的主题内容

跳转到 API 页面

警告

这是一个警告

这是一个警告

Markdown 基础示例 ​

标题 ​

一级标题 H1 ​

二级标题 H2 ​

三级标题 H3 ​

四级标题 H4 ​

五级标题 H5 ​

六级标题 H6 ​

加粗 ​

斜体 ​

下划线 ​

删除线 ​

高亮 ​

安装 markdown-it-mark 插件 ​

配置 ​

修改样式 ​

使用 ​

表格 ​

公式 ​

内联公式 ​

mathjax3 插件公式 ​

数学公式 ​

安装 markdown-it-mathjax3 ​

配置使用 ​

代码块 ​

普通代码块 ​

高亮代码块 ​

聚焦代码块 ​

代码块中的颜色差异 ​

高亮“错误”和“警告” ​

行号 ​

提示框 ​

VitePress 风格提示框 ​

GitHub 风格的提示框 ​

有序列表 ​

无序列表 ​

任务列表 ​

安装 markdown-it-task-checkbox 插件 ​

配置 ​

修改样式 ​

水平分割线 ​

图片 ​

Markdown 格式 ![alt](src) ​

HTML 格式 <img src="src" alt="alt" /> ​

超链接 ​

外部链接 ​

内部链接 ​

Markdown 基础示例

标题

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

加粗

斜体

下划线

删除线

高亮

安装 `markdown-it-mark` 插件

配置

修改样式

使用

表格

公式

内联公式

mathjax3 插件公式

数学公式

安装 markdown-it-mathjax3

配置使用

代码块

普通代码块

高亮代码块

聚焦代码块

代码块中的颜色差异

高亮“错误”和“警告”

行号

提示框

VitePress 风格提示框

GitHub 风格的提示框

有序列表

无序列表

任务列表

安装 `markdown-it-task-checkbox` 插件

配置

修改样式

水平分割线

图片

Markdown 格式 `![alt](src)`

HTML 格式 `<img src="src" alt="alt" />`

超链接

外部链接

内部链接