添加 markdown 任务插件

这篇文章描述可能比较简单, 但其实探索的过程也是花了一点时间的, 所以还是记录一下吧。

我观察到 Vitepress(版本:1.0.0-alpha.72)不支持 markdown 的任务渲染,所以找了一下相关的插件

好几年的老项目了,一直也没有更新,心里有点发怵,但是看到这个插件的 star 数量还是比较多的,所以还是尝试了一下:

// .docs/.vitepress/config.ts
...
const taskLists = require('markdown-it-task-list')

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

但是,这个插件好像对任务中的空格处理有点问题

所以我又找了一个插件:markdown-it-task-checkbox

依葫芦画瓢, 配置好插件

// .docs/.vitepress/config.ts
...
const taskLists = require('markdown-it-task-list')
const taskLists = require('markdown-it-task-checkbox')

export default defineConfig({
  ...
  markdown: {
    config: (md) => {
      md.use(taskLists)
      md.use(taskLists, {
        disabled: true,
        divWrap: false,
        divClass: 'checkbox',
        idPrefix: 'cbx_',
        ulClass: 'task-list',
        liClass: 'task-list-item',
      })
    }
  }
})

现在来看看效果:

添加 markdown 任务插件 ​

添加 markdown 任务插件