VM Docs

Markdown 扩展示例 Alpha ​

本页展示了本文档提供的 Markdown 扩展功能。 VitePress所支持的 Markdown 扩展功能请查看VitePress官方文档。

词语释义 (Abbr) Dependency ​

此功能由markdown-it-abbr提供支持，此功能用于定义词语释义。

HTML 规范由 W3C 负责维护。

md
*[HTML]: 超文本标记语言（Hyper Text Markup Language）
*[W3C]: 万维网联盟（World Wide Web Consortium）

HTML 规范由 W3C 负责维护。

此功能由@nolebase/markdown-it-bi-directional-links提供支持，此功能用于创建文档内部链接。

component

自定义链接名称

还支持支持粗体、斜体 和代码

还可以自定义 HTML

md
[[component]]

[[component|自定义链接名称]]

[[component|还支持支持**粗体**、*斜体* 和`代码`]]

[[component|<span style="color: red;">还可以自定义 HTML</span>]]

更多使用方式可以前往@nolebase/markdown-it-bi-directional-links文档查看

图片组（Image group）Dependency ​

此功能由@miletorix/vitepress-image-group提供支持，此功能用于展示多张图片。

ImageGroup - doubleImageGroup - double
md
<ImageGroup :sources="['/img/tutorial/modpack/translation/pcl1.png','/img/tutorial/modpack/translation/pcl2.png']" type="auto"/>

更多使用方式可以前往@miletorix/vitepress-image-group文档查看

文件树（File Tree）Dependency ​

此功能由vitepress-plugin-file-tree提供支持，此功能用于展示文件结构。

docs

.vitepress

config.ts

page1.md

index.md

theme# 一个 主题 目录

client

components

Navbar.vue

composables

useNavbar.ts

styles

navbar.css

config.ts

node

package.json

pnpm-lock.yaml

.gitignore

README.md

…

md
::: file-tree
- docs
    - .vitepress
        - ++ config.ts
    - -- page1.md
    - index.md
- theme  # 一个 **主题** 目录
    - client
        - components
            - **Navbar.vue**
        - composables
            - useNavbar.ts
        - styles
            - navbar.css
        - config.ts
    - node/
- package.json
- pnpm-lock.yaml
- .gitignore
- README.md
- …
:::

更多使用方式可以前往vitepress-plugin-file-tree文档查看

示例容器（Demo）Unstable ​

通过本文档自行基于markdown-it接口实现的demo插件，我们提供了一个名为demo的示例容器。

这是外层容器的内容。

这是内层容器的内容，支持粗体、斜体 和代码。

同样支持Vue组件
md
这是内层容器的内容，支持**粗体**、_斜体_ 和`代码`。
<MiniLinkCard title="同样支持Vue组件" href="api" icon="❓" />

外层容器的其他内容。

md
这是外层容器的内容。

:::demo 套娃容器
这是内层容器的内容，支持**粗体**、_斜体_ 和`代码`。
<MiniLinkCard title="同样支持Vue组件" href="api" icon="❓" />
:::

外层容器的其他内容。

步骤组（Stepper）Unstable ​

通过本文档自行基于markdown-it接口实现的stepper插件，我们提供了一个名为stepper的步骤组容器。

1
第一步
2
第二步
3
第三步
4
第四步

安装项目依赖：

bash
npm install

启动开发服务器：

bash
npm run dev

打开浏览器访问 http://localhost:5173 查看效果。

出bug了，D老师快救救我

md
:::stepper
@tab 第一步
安装项目依赖：

```bash
npm install
```

@tab 第二步
启动开发服务器：

```bash
npm run dev
```

@tab 第三步
打开浏览器访问 `http://localhost:5173` 查看效果。

@tab 第四步
出bug了，D老师快救救我
:::