插件

公式

支持数学公式的插件，先安装markdown-it-mathjax3插件

npm add -D markdown-it-mathjax3

安装好插件后，在.vitepress目录下的config.ts中设置开启math。

修改标签：export default→markdown→math

// .vitepress/config.ts
export default {
  markdown: {
    math: true
  }
}

效果：

$$\sqrt{x}\sqrt[3]{x}$$

时间轴

提供 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线(时间轴)样式。

官方https://www.npmjs.com/package/vitepress-markdown-timeline

1 安装方法

建议使用包管理器进行安装(npm、Yarn、pnpm)，根据自己的环境选择三个中的一个进行安装。

# NPM
$ npm install vitepress-markdown-timeline

# Yarn
$ yarn add vitepress-markdown-timeline

# pnpm
$ pnpm install vitepress-markdown-timeline

2 配置

在.vitepress/config.mts中先引用，再注册 markdown 解析插件

...
import timeline from 'vitepress-markdown-timeline'  // 引入markdown时间轴解析插件

export default {
  // ...
  markdown: {
    // ...
    config: (md) => { md.use(timeline) },	//注册markdown时间轴插件
  },
};

在.vitepress/theme/index.ts中引入时间线样式

import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
// 引入时间轴样式
import 'vitepress-markdown-timeline/dist/theme/index.css'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
    })
  },
  enhanceApp({ app, router, siteData }) {
    // ...
  }
} satisfies Theme

3 使用方法

在markdown文档插入以下代码(中间的内容可以使用任何markdown语法)

::: timeline 2023-11-19
- **这里是加粗的文本**
- 这里是无序普通的文本
:::

::: timeline 2023-11-20
这里的内容可以使用任何markdown语法  
这里是普通的文本演示
:::

渲染效果：

2023-11-19

• 这里是加粗的文本
• 这里是无序普通的文本

2023-11-20

这里的内容可以使用任何markdown语法
这里是普通的文本演示