mdit-vue@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_inlinetags in headings to support vue components. - Supports containerTag, listTag and linkTag.
- Only allows array in level option.
- Code refactor and optimizations.
Install
npm i @mdit-vue/plugin-toc
Usage
import { tocPlugin } from '@mdit-vue/plugin-toc';
import MarkdownIt from 'markdown-it';
const md = MarkdownIt({ html: true }).use(tocPlugin, {
// options
});
Options
pattern
Type:
RegExpDefault:
/^\[\[toc\]\]$/iDetails:
The pattern serving as the TOC placeholder in your markdown.
slugify
Type:
(str: string) => stringDefault:
slugifyfrom@mdit-vue/sharedDetails:
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
idof the headings have already been determined by markdown-it-anchor'sslugifyoption.
format
Type:
(str: string) => stringDetails:
A function for formatting headings.
level
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
leveloption to ensure the target links are existed.
shouldAllowNested
Type:
booleanDefault:
falseDetails:
Should allow headers inside nested blocks or not.
If set to
true, headers inside blockquote, list, etc. would also be included.
containerTag
Type:
stringDefault:
'nav'Details:
HTML tag of the TOC container.
containerClass
Type:
stringDefault:
'table-of-contents'Details:
The class for the TOC container.
listTag
Type:
'ul' | 'ol'Default:
'ul'Details:
HTML tag of the TOC list.
listClass
Type:
stringDefault:
''Details:
The class for the TOC list.
itemClass
Type:
stringDefault:
''Details:
The class for the
<li>tag.
linkTag
Type:
'a' | 'router-link'Default:
'a'Details:
The tag of the link inside the
<li>tag.You can set this option to render to links as vue-router's router-link.
linkClass
Type:
stringDefault:
''Details:
The class for the link inside the
<li>tag.