A markdown-it plugin to generate table-of-contents that compatible with Vue.js
npm install @mdit-vue/plugin-toc

A markdown-it plugin to generate table-of-contents (TOC) that compatible with Vue.js.
This plugin is basically a fork of markdown-it-toc-done-right, with following enhancement:
- Allows html_inline tags in headings to support vue components.
- Supports containerTag, listTag and linkTag.
- Only allows array in level option.
- Code refactor and optimizations.
``sh`
npm i @mdit-vue/plugin-toc
`ts
import { tocPlugin } from '@mdit-vue/plugin-toc';
import MarkdownIt from 'markdown-it';
const md = MarkdownIt({ html: true }).use(tocPlugin, {
// options
});
`
- Type: RegExp
- Default: /^\[\[toc\]\]$/i
- Details:
The pattern serving as the TOC placeholder in your markdown.
- Type: (str: string) => string
- Default: slugify from @mdit-vue/shared
- Details:
A custom slugification function.
The default slugify function comes from @mdit-vue/shared package.
When using this plugin with markdown-it-anchor (recommended), this option will be ignored because the id of the headings have already been determined by markdown-it-anchor's slugify option.
- Type: (str: string) => string
- Details:
A function for formatting headings.
- Type: number[]
- Default: [2, 3]
- Details:
Heading level that going to be included in the TOC.
When using this plugin with markdown-it-anchor (recommended), this option should be a subset of markdown-it-anchor's level option to ensure the target links are existed.
- Type: boolean
- Default: false
- Details:
Should allow headers inside nested blocks or not.
If set to true, headers inside blockquote, list, etc. would also be included.
- Type: string
- Default: 'nav'
- Details:
HTML tag of the TOC container.
- Type: string
- Default: 'table-of-contents'
- Details:
The class for the TOC container.
- Type: 'ul' | 'ol'
- Default: 'ul'
- Details:
HTML tag of the TOC list.
- Type: string
- Default: ''
- Details:
The class for the TOC list.
- Type: string
- Default: ''
- Details:
The class for the
tag.$3
- Type:
'a' | 'router-link'- Default:
'a'- Details:
The tag of the link inside the
tag. You can set this option to render to links as vue-router's router-link.
$3
- Type:
string- Default:
''- Details:
The class for the link inside the