Vitepress中使用markdown渲染时间轴

前言

最近用vitepress整了个博客，写写博客的同时记录下每日的生活，想用时间轴（时间线）的形式展示每天的工作和日常，去官网翻了翻vitepress的markdown增强能力，发现也没有这一块的支持。于是在npm上找了找，发现一个好用的插件能实现时间轴功能。npm搜索vitepress-markdown-timeline，或直接点击链接进入。

 

安装

# NPM
$ npm install vitepress-markdown-timeline

# Yarn
$ yarn add vitepress-markdown-timeline

# pnpm
$ pnpm install vitepress-markdown-timeline

引入

在.vitepress/config.ts中先注册 markdown 解析插件

// .vitepress/config.ts or .vitepress/config.js
import timeline from "vitepress-markdown-timeline";
export default {
  // ...
  markdown: {
    // ...
    config: (md) => {
      md.use(timeline);
    },
  },
};

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

// .vitepress/theme/index.ts or .vitepress/theme/index.js
import Theme from "vitepress/theme";
import "./styles/vars.scss";
import "./styles/style.scss";

// 只需添加以下一行代码，引入时间线样式
import "vitepress-markdown-timeline/dist/theme/index.css";

export default {
  ...Theme,
  enhanceApp(ctx) {
    Theme.enhanceApp(ctx);
  },
};

使用

在 markdown 文件中以::: timeline 时间开头，:::结尾，中间插入内容即可（内容中可使用任何markdown语法）

输入

::: timeline 2023-05-24
- **do some thing1**
- do some thing2
:::

::: timeline 2023-05-23
do some thing3
do some thing4
:::

渲染以下结果

 

Demo

在线 demo

Q&A

如何设置时间线圆点颜色？

找到.vitepress\theme\styles\vars.scss文件

:root {
  //...
  --vp-c-brand: #b575e3; // 修改vitepress提供的主题颜色变量即可
}