@leisn/markdown-it-toc

Markdown-it plugin to make table of contents, default parse tag [toc].

Installaton

$ npm install @leisn/markdown-it-toc
or
$ yarn add @leisn/markdown-it-toc

E.g. default

Source markdown

[toc]
# H1-1
## H2-1
### H3-1
# H1-2

Result document

<p>
  <div id="toc" class="toc-wrapper">
    <ul>
      <li>
        <a href="#toc.1">
          <span class="toc-item-index">1</span>
          H1-1
        </a>
      </li>
      <ul>
        <li>
          <a href="#toc.1-1">
            <span class="toc-item-index">1.1</span>
            H2-1
          </a>
        </li>
        <ul>
          <li>
            <a href="#toc.1-1-1">
              <span class="toc-item-index">1.1.1</span>
              H3-1
            </a>
          </li>
        </ul>
      </ul>
      <li>
        <a href="#toc.2">
          <span class="toc-item-index">2</span>
          H1-2
        </a>
      </li>
     </ul>
  </div>
</p>

<h1 id="toc.1" class="toc-heading">
  <span class="toc-heading-prefix">1</span>
  <span class="toc-heading-content">H1-1</span>
  <a href="#toc" class="toc-heading-suffix">#</a>
</h1>
<h2 id="toc.1-1" class="toc-heading">
  <span class="toc-heading-prefix">1.1</span>
  <span class="toc-heading-content">H2-1</span>
  <a href="#toc" class="toc-heading-suffix">#</a>
</h2>
<h3 id="toc.1-1-1" class="toc-heading">
  <span class="toc-heading-prefix">1.1.1</span>
  <span class="toc-heading-content">H3-1</span>
  <a href="#toc" class="toc-heading-suffix">#</a>
</h3>
<h1 id="toc.2" class="toc-heading">
  <span class="toc-heading-prefix">2</span>
  <span class="toc-heading-content">H1-2</span>
  <a href="#toc" class="toc-heading-suffix">#</a>
</h1>

Usage

const md = require('markdown-it')(mkOpts)
	.use(require('@leisn/markdown-it-toc'),options);
console.log(md.render('[toc]\n# h1\n## h2-1\n## h2-2'));

Options

• tocRegexp?: RegExp Regular expression to detect TOC (default /\[toc\]/im).

• tocTag?: string Tag for toc root element ( div by default ).

• tocAttrs?: string Attributes for toc root element( id="toc" class="toc-wrapper" by default ).

• headingAttrs?: string Attributes for headings h1,h2,h3... ( class="toc-heading" by default )

  --------------------------
  # h1 title
  --------------------------
  <h1 {headingAttrs}>
  <span>h1 title</span>
  </h1>

• headingContentAttrs?: string Attributes for headings content span ( class="toc-heading-content" by default )

  --------------------------
  # headingContent
  --------------------------
  <h1>
  <span {headingContentAttrs} > headingContent </span>
  </h1>

• getToc?(toc: string): boolean Get toc result, return false if you don't want it show in the result html document, else return true(default null). toc : the result html document

• getPathId?(info): string Get id content for forwarding in page, (e.g. for info.paths=[1,2] default return toc-no.1-2 )

• getTocItemContent?(info): string Content inside toc item a (html, include item heading text)

• getHeadingPrefix?(info): string Content inside heading (html, before heading text)

  --------------------------
  # h1 title
  --------------------------
  <h1>
  {getHeadingPrefix}
  <span>h1 title</span>
  </h1>

• getHeadingSuffix?(info): string Content inside heading (html, after heading text)

  --------------------------
  # h1 title
  --------------------------
  <h1>
  <span>h1 title</span>
  {getHeadingSuffix}
  </h1>

Test

$ npm run test
or
$ yarn test

LICENSE

MIT