其他技巧：Footnote, Mermaid，LiteTree

引入 Footnote

1. 安装

npm install -D markdown-it-footnote

2. 配置

在 config.mts 中

import markdownItFootnote from 'markdown-it-footnote'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(markdownItFootnote)
    }
  },
})

3. 使用

# global component[^1]

This is a global component test page.

[^1]: Registering Global Components, https://vitepress.dev/guide/extending-default-theme#registering-global-components

引入 Latex

markdown-it 有多种插件，详见：https://mdit-plugins.github.io/

npm i @mdit/plugin-katex -D

然后如上在 config.mts中引入：

import { katex } from "@mdit/plugin-katex"
...
  markdown: {
    config: (md) => {
      md.use(markdownItFootnote)
      md.use(katex);
    }
  },

特别注意，需要将 .katex-html 隐藏，而只保留 katex-mathml显示：

.katex-html {
  display:none;
}

使用 Mermaid

1. 安装

npm install -D mermaid vitepress-plugin-mermaid

插件参见： https://emersonbottero.github.io/vitepress-plugin-mermaid/

2. 引入

在 config.mts 中加入：

import { withMermaid } from "vitepress-plugin-mermaid";

// export default defineConfig({
export default withMermaid({
})

3. 在页面中使用

在代码块设置 mermaid，然后输入 mermaid 代码：

classDiagram
  class BasePromptTemplate
  class StringPromptTemplate
  class PromptTemplate
  class BaseChatPromptTemplate

  BasePromptTemplate <|-- StringPromptTemplate
  BasePromptTemplate <|-- BaseChatPromptTemplate
  StringPromptTemplate <|-- PromptTemplate
  BaseChatPromptTemplate <|-- ChatPromptTemplate

效果图如下：

用 LiteTree 生成树形组件

LiteTree是一款非常简单的React/Vue树组件，它的设计初衷是为了在vitepress/dumi等编辑Markdown文档时可以比较方便地显示树。

项目网址：https://zhangfisher.github.io/lite-tree/about.html

1. 安装

npm install @lite-tree/vue @lite-tree/icons

2. 注册全局组件

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { LiteTree } from '@lite-tree/vue'

/** @type {import('vitepress').Theme} */
export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('LiteTree'，LiteTree)
  }
}

接下来，需要在.vitepress/config.mts中配置Vue参数，如下：

// .vitepress/config.mts
export default defineConfig({
 // ...
  vue:{
    template: {                      
      compilerOptions: {
        whitespace: 'preserve'
      }
    }
  }
})

设置whitespace: 'preserve'是为了保留Markdown中的空格，以便LiteTree可以正确解析lite格式的树数据。

3. 使用

可在 Markdown 中按如下方式使用：

lite是一种使用缩进来代表层级的简化格式，每4个空格（或 tab）代表一个树层级，适合在Markdown文档中使用。 默认情况下，前置-号来表示节点展开状态，+号表示节点关闭状态。 在节点标题后紧随(tag,tag,tag)用来表示节点的标签，支持多个标签。

<LiteTree>
根节点
    节点1                     
        节点1.1(JavaScript,Go,C++)
        节点1.2
    节点2({color:white;background-color:#ff9e9e;border:1px solid red}A,{color:white;background-color:#9e9eff;border:1px solid blue}B,{color:white;background-color:#bfffbf;border:1px solid green}C)                     
        节点2.1
        节点2.2([tag]Github,Gitgee)
</LiteTree>

LiteTree内置支持以下内置标识：

<LiteTree>
新增       //+     代表新增
删除       //-     代表删除
修改       //*      代表修改
强调       //!      代表强调
错误       //x      代表错误
成功       //v      代表成功
</LiteTree>