VuePress 中的 Markdown 扩展

https://theme-hope.vuejs.press/zh/guide/markdown/intro.html

VuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展

链接

VuePress 中的 链接语法 转换：

原始Markdown：

<!-- 相对路径 -->
[首页](../../README.md)  
[贡献指南](../../contribution.md)  
[VuePress 配置](./config.md)

<!-- 绝对路径 -->
[指南](/zh/guide/README.md)  
[配置参考 > 多语言](/zh/config/i18n.md)

<!-- URL -->
[GitHub](https://github.com)

转换为：

<template>
  <RouterLink to="/v2/zh/">首页</RouterLink>
  <RouterLink to="/v2/zh/contribution.html">贡献指南</RouterLink>
  <RouterLink to="/v2/zh/cookbook/vuepress/config.html"
    >VuePress 配置</RouterLink>
  <RouterLink to="/v2/zh/guide/">指南</RouterLink>
  <RouterLink to="/v2/zh/reference/config.html#links"
    >配置参考 &gt; 多语言</RouterLink
  >
  <a href="https://github.com" target="_blank" rel="noopener noreferrer"
    >GitHub</a
  >
</template>

• 内部链接会被转换为 <RouterLink> 以便进行 SPA 导航。
• 指向 .md 文件的内部链接会被转换为目标页面的 路由路径，并且支持绝对路径和相对路径。
• 外部链接会被添加 target="_blank" rel="noopener noreferrer" 属性。

建议

对于 内部链接，尽可能使用 相对路径 而不是绝对路径。

在使用绝对路径时，如果你站点的 base 不是 "/"，你需要手动添加 base 或者使用 base helper 。

引入目录

如果你想要把当前页面的目录添加到 Markdown 内容中，你可以使用 [[toc]] 语法。

[[toc]]

代码块

代码块在 Node 端处理

行高亮

```ts {1,6-8} --> 编写高亮行数
import type { UserConfig } from "@vuepress/cli";
import { defaultTheme } from "@vuepress/theme-default";

export const config: UserConfig = {
  title: "你好， VuePress",

  theme: defaultTheme({
    logo: "https://vuejs.org/images/logo.png",
  }),
};
```

行数范围标记的例子:

• 行数范围: {5-8}
• 多个单行: {4,7,9}
• 组合: {4,7-13,16,23-27,40}

行号

行号默认启用

局部禁用方式：

```ts:no-line-numbers
// 行号被禁用
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

:no-v-pre

为了避免你的代码块被 Vue 编译
可以在代码块添加 :v-pre / :no-v-pre 标记来覆盖配置项中的设置。

导入代码块

从文件中导入代码块: https://theme-hope.vuejs.press/zh/cookbook/vuepress/markdown.html#导入代码块

在 Markdown中使用 Vue

• Markdown 中允许使用 HTML。
• Vue 模板语法是和 HTML 兼容的。

Markdown 中允许直接使用 Vue 模板语法

一加一等于: {{ 1 + 1 }}

<span v-for="i in 3"> span: {{ i }} </span>

这是默认主题内置的 `<Badge />` 组件 <Badge text="演示" />

注意：不要在 VuePress 的 Markdown 中使用已废弃的 html 标签

使用Vue组件

在MarkDown文件中可以使用Vue语法和Vue组件
建议在.vuepress/components文件夹下创建组件
通过@vuepress/plugin-register-components插件可以进行组件的注册

安装插件与配置项

在vuepress-theme-hope中使用：
为了正确导入自己的组件，你需要为它们创建别名，你可以通过 alias 选项实现这一点:

// .vuepress/config.ts
import { getDirname, path } from "@vuepress/utils";

const __dirname = getDirname(import.meta.url);

export default {
  alias: {
    "@MyComponent": path.resolve(__dirname, "components/MyComponent.vue"),
  },
};

在MarkDown中引入：

<MyComponent />

<script setup lang="ts">
import MyComponent from "@MyComponent";
</script>