---

Markdown样式测试

• 二级标题
  • 三级标题
• 代码格式
• 字体测试
• 在Markdown中使用Vue语法
• VuePress的内置组件
• VuePress拓展：提示容器
• Markdown官方拓展语法
  • 脚注
  • 任务列表
  • 组件
• Markdown数学公式支持
  • 单行数学公式
  • 多行数学公式
• VuePress组件拓展
  • 媒体组件
  • 工具组件

只能读取二级和三级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---

代码格式

单行代码 <?php phpinfo();?>
多行代码 Python

import requests
print(requests.get("http://example.com").text)

不显示行号的多行代码 Python:no-line-numbers

import requests
print(requests.get("http://example.com").text)

VuePress默认不编译代码 md

<!-- 默认情况下，这里会被保持原样 -->

1 + 2 + 3 = {{ 1 + 2 + 3 }}

使用no-v-pre来允许Vue编译代码 md:no-v-pre （生产环境中这个配置似乎是锁死不能打开的）

<!-- 这里会被 Vue 编译 -->

1 + 2 + 3 = {{ 1 + 2 + 3 }}

// 由于 JS 代码高亮，这里不会被正确编译
const onePlusTwoPlusThree = {{ 1 + 2 + 3 }}

---

字体测试

斜体
粗体
波浪线
$\frac{1}{2}$ 当前未启用LateX插件

---

---

• 无序列表
  • 次级无序列表
    • 次次级无序列表

1. 有序列表
   1. 1.1
      1. 1.1.1
   2. 1.2
2. 2
3. 3
   1. 3.1
      1. 3.1.1
      2. 3.1.2

---

在Markdown中使用Vue语法

一加一等于： 2

span: 1 span: 2 span: 3
效果如下所示：

---

VuePress的内置组件

- VuePress - <Badge type="tip" text="v2" vertical="top" />
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
- VuePress - <Badge type="important" text="v2" vertical="middle" />
- VuePress - <Badge type="info" text="v2" vertical="middle" />
- VuePress - <Badge type="note" text="v2" vertical="middle" />

• VuePress - 提示
• VuePress - 警告
• VuePress - 危险
• VuePress - 重要
• VuePress - 信息
• VuePress - 备注

---

VuePress拓展：提示容器

提示

这是一个提示容器，下面是一段代码

if __name__ == '__main__':
	print("Hello World")

注意看，这是一个自定义标题

这是一个备注容器

警告消息

[!important]
好像无法启用GFM警告

---

Markdown官方拓展语法

脚注

任务列表

- 使用 `- [ ] 一些文字` 渲染一个未勾选的任务项 (中括号间要有空格)
- 使用 `- [x] 一些文字` 渲染一个勾选了的任务项 (我们也支持大写的 `X`)

• 未完成的计划
• 已完成的计划

Obisidian里可以正确渲染，但在VuePress里却无法渲染

提示

该语法需要在config.ts中启用该插件的gfm或tasklist配置

组件

可以使用 component 代码块来在 Markdown 中添加组件。YAML 和 JSON 的数据格式均受支持。

SyYhunfhds

提示

该语法需要在config.ts中启用该插件的component配置

---

Markdown数学公式支持

单行数学公式

Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.

Euler's identity $e^{i\pi }+1=0$ is a beautiful formula in ${\mathbb{R}}^2$.

多行数学公式

$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
$$

$$\frac{{\partial }^r}{\partial {\omega }^r}\left(\frac{y^{\omega }}{\omega }\right)=\left(\frac{y^{\omega }}{\omega }\right)\{(\log y{)}^r+\sum _{i=1}^r\frac{(-1{)}^{I}r\cdots (r-i+1)(\log y{)}^{ri}}{{\omega }^i}\}$$

---

VuePress组件拓展

媒体组件

Bilibili

A BiliBili video

也是蜜汁渲染不出来

工具组件

share

全部组件（灰色）

全部组件（彩色）

自定义分享服务

配置存档，好像这么存不太对

plugins: {
    components: {
       components: ["Badge", "VPCard"],
       componentOptions: {
        share: {
          services: [
            "douban", "email", "qq", "linkedin", "pinterest"
            // 这里还有其他关键字，详情请查阅https://plugin-components.vuejs.press/zh/guide/utilities/share.html#%E8%AE%BE%E7%BD%AE%E7%BB%84%E4%BB%B6
          ],
        },
       },
       
     },
  },