Markdown 扩展语法演示

数学方程

行内公式: $x=2$

换行公式:

Mermaid

graph LR; A-->B; A-->C; B-->D; C-->D;

graph TD A[Start] --> B[Process] B --> C[End]

代码块

上下 3 个反引号开始和结尾，中间放内容/文字/代码

前面加 4 个空格也是可以的，但不建议这么做

javascript

export default {
  name: 'MyComponent',
  // ...
}

html

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

cpp

#include "stdio"
#define MAX_NUM 100

string text = "this is text";

// this is comment
for(int i=0; i<100; ++i)
{
  int n = i + 1;
}

python

import logging
from pathlib import Path

text = "this is text"

# 创建并配置一个日志记录器，INFO级别使用简化格式。
def setup_logger( name: str)
    logger = logging.getLogger(name)
    logger.setLevel(level)

行高亮

比如我要第2-3行和第5行显示，连续行用 - ，不连续行用 ,

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

嵌套代码块

比如我们想展示代码块的写法，但是反引号已经用了，那么我们就用4个反引号，以此类推即可

```shell
pnpm vuepress build
```

diff 高亮

加入diff即可，+ 或 - 都可以表示

- pnpm add -D vuepress@next
+ pnpm add -D vuepress@next @vuepress/client@next vue

自定义容器

自定义容器可以通过它们的类型、标题和内容来定义。

默认标题

输入

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

输出

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.

自定义标题

可以通过在容器的 "type" 之后附加文本来设置自定义标题。

输入

::: danger STOP
危险区域，请勿继续
:::

::: details 点我查看代码
```js
console.log('Hello, VitePress!')
```
:::

输出

STOP

危险区域，请勿继续

点我查看代码

console.log('Hello, VitePress!')

此外，可以通过在站点配置中添加以下内容来全局设置自定义标题，如果不是用英语书写，这会很有帮助：

// config.ts
export default defineConfig({
  // ...
  markdown: {
    container: {
      tipLabel: '提示',
      warningLabel: '警告',
      dangerLabel: '危险',
      infoLabel: '信息',
      detailsLabel: '详细信息'
    }
  }
  // ...
})

raw

这是一个特殊的容器，可以用来防止与 VitePress 的样式和路由冲突。这在记录组件库时特别有用。可能还想查看 whyframe 以获得更好的隔离。

语法

::: raw
Wraps in a `<div class="vp-raw">`
:::

vp-raw class 也可以直接用于元素。样式隔离目前是可选的：

• 使用喜欢的包管理器来安装需要的依赖项：

  $ npm add -D postcss

• 创建 docs/postcss.config.mjs 文件并将以下内容添加到其中：

  import { postcssIsolateStyles } from 'vitepress'
  
  export default {
    plugins: [postcssIsolateStyles()]
  }

  你可以像这样传递它的选项：

  postcssIsolateStyles({
    includeFiles: [/custom\.css/] // 默认为 [/vp-doc\.css/, /base\.css/]
  })

GitHub 风格的警报

VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。

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

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

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

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

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

NOTE

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

TIP

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

IMPORTANT

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

WARNING

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

CAUTION

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