v0.7.0

• Added: Override the container element
• ⚠️ BREAKING CHANGE: The plugin moved from inline mode to block mode (fixes #62)
• Changed: Updated tests, readme etc.
• Removed: Old forceFullToc attribute

---

Override the container element

Two new options that accept functions that return HTML to render custom containers (and more elements if necessary):

md.use(markdownItTOC, {
    transformContainerOpen: () => {
        return '<nav class="my-toc"><button>Toggle</button><h3>Table of Contents</h3>';
    },
    transformContainerClose: () => {
        return '</nav>';
    }
});

Inline mode is now block mode

Input:

[[toc]]

Output before:

<p><div class="table-of-contents"></div></p>

Output now:

<div class="table-of-contents"></div>

The TOC now is generated in block mode, which removes the wrapping p tag. Wrapping a div in a p is considered invalid HTML.

If you really need a wrapping p-element, you can emulate the old behavior with the new container override functions:

const md = new MarkdownIt();
md.use(markdownItTOC, {
    transformContainerOpen: () => {
        return '<p><div class="table-of-contents">';
    },
    transformContainerClose: () => {
        return '</div></p>';
    }
});

Be aware that the old tests/examples now behave differently when using soft breaks before the [[toc]] markup:

Input:

# Article
Text with soft line break (two spaces)  
[[toc]]

## Headline

Output before:

<h1>Article</h1>
<p>Text with soft line break (two spaces)<br>
<div class="table-of-contents">...</div></p>

Output now:

<h1>Article</h1>
<p>Text with soft line break (two spaces)</p>
<div class="table-of-contents">...</div>