2.1.3 • Published 6 months ago

@mdit-vue/plugin-toc v2.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

@mdit-vue/plugin-toc

npm license

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.

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: RegExp

  • Default: /^\[\[toc\]\]$/i

  • Details:

    The pattern serving as the TOC placeholder in your markdown.

slugify

  • 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.

format

  • Type: (str: string) => string

  • Details:

    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 level option to ensure the target links are existed.

shouldAllowNested

  • 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.

containerTag

  • Type: string

  • Default: 'nav'

  • Details:

    HTML tag of the TOC container.

containerClass

  • Type: string

  • Default: '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: string

  • Default: ''

  • Details:

    The class for the TOC list.

itemClass

  • Type: string

  • Default: ''

  • 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: string

  • Default: ''

  • Details:

    The class for the link inside the <li> tag.

2.1.3

6 months ago

2.1.2

7 months ago

2.1.0

7 months ago

2.0.0

11 months ago

1.0.0

1 year ago

0.12.1

1 year ago

0.12.0

2 years ago

0.11.2

2 years ago

0.10.0

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.9.0

2 years ago

0.8.0

2 years ago

0.7.1

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago