.
Want to know more about nested counters? Visit .
## Contributing
* ⇄ Pull requests and ★ Stars are always welcome.
* For bugs and feature requests, please create an issue.
* Pull requests must be accompanied by passing automated tests (`$ npm test`).
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
================================================
FILE: __test__/test.js
================================================
/* eslint-env jest */
/* eslint-disable no-template-curly-in-string */
const markdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')
const markdownItTocDoneRight = require('../dist/markdownItTocDoneRight')
const uslug = require('uslug')
function getMarkdownIt () {
return markdownIt({
html: false,
xhtmlOut: true,
typographer: true
})
}
function uslugify (text) {
return uslug(text)
}
function customFormat (content, htmlEncoder) {
return `${htmlEncoder(content)}`
}
const commonMd = getMarkdownIt()
.use(markdownItAnchor, {
permalink: true,
permalinkBefore: true,
permalinkSymbol: '§'
})
.use(markdownItTocDoneRight)
test('empty set', () => {
const mdContent = '${toc}'
const htmlContent = ''
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('single element', () => {
const mdContent = '${toc}\n\n# Title'
const htmlContent = ' Title
\n'
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test("single element doesn't need to be h1", () => {
const mdContent = '${toc}\n\n## Section'
const htmlContent = ' Section
\n'
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('main heading usually comes first', () => {
const mdContent = '${toc}\n\n# Title\n\n## Section 1\n\n### Sub Section 1\n\n### Sub Section 2\n\n## Section 2'
const htmlContent = ` Title
Section 1
Sub Section 1
Sub Section 2
Section 2
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('but sometimes it comes after navigation', () => {
const mdContent = '${toc}\n\n## Navigation Menu\n\n## Sidebar\n\n### More news\n\n### What our clients say\n\n### Ratings\n\n# Title\n\n## Section 1\n\n### Sub Section 1\n\n### Sub Section 2\n\n## Section 2'
const htmlContent = `
More news
What our clients say
Ratings
Title
Section 1
Sub Section 1
Sub Section 2
Section 2
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('markup inside the heading should be treated', () => {
const mdContent = '${toc}\n\n# A **heading** with *markup* `code` [link](https://github.com)'
const htmlContent = ' A heading with markup code link
\n'
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('especially < and >', () => {
const mdContent = '${toc}\n\n# > Title\n\n## < Section\n\n## > Another Section'
const htmlContent = ` > Title
< Section
> Another Section
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('skipping heading ranks should work', () => {
const mdContent = '${toc}\n\n## Foo\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus porta nulla id porttitor. Vivamus sagittis, leo eget gravida euismod, justo ex dignissim sem, in tempus turpis libero quis velit. Aliquam sit amet ultricies quam.\n\n#### Bar\nSuspendisse ornare pellentesque nibh non tristique. Suspendisse potenti. Nunc id dui non diam luctus imperdiet.\n\n## Grob\nQuisque fringilla urna sit amet elit ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. In posuere tellus suscipit sapien rhoncus euismod. Phasellus eu ligula mollis, finibus tortor ut, consectetur metus. Vestibulum eget leo felis.'
const htmlContent = ` Foo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus porta nulla id porttitor. Vivamus sagittis, leo eget gravida euismod, justo ex dignissim sem, in tempus turpis libero quis velit. Aliquam sit amet ultricies quam.
Bar
Suspendisse ornare pellentesque nibh non tristique. Suspendisse potenti. Nunc id dui non diam luctus imperdiet.
Grob
Quisque fringilla urna sit amet elit ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. In posuere tellus suscipit sapien rhoncus euismod. Phasellus eu ligula mollis, finibus tortor ut, consectetur metus. Vestibulum eget leo felis.
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('code blocks should not be confused as headings', () => {
const mdContent = '[[_toc_]]\n\n## Foo\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus porta nulla id porttitor. Vivamus sagittis, leo eget gravida euismod, justo ex dignissim sem, in tempus turpis libero quis velit. Aliquam sit amet ultricies quam.\n\n#### Bar\nSuspendisse ornare pellentesque nibh non tristique. Suspendisse potenti. Nunc id dui non diam luctus imperdiet.\n\n ## Grob\n Quisque fringilla urna sit amet elit ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. In posuere tellus suscipit sapien rhoncus euismod. Phasellus eu ligula mollis, finibus tortor ut, consectetur metus. Vestibulum eget leo felis.'
const htmlContent = ` Foo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus porta nulla id porttitor. Vivamus sagittis, leo eget gravida euismod, justo ex dignissim sem, in tempus turpis libero quis velit. Aliquam sit amet ultricies quam.
Bar
Suspendisse ornare pellentesque nibh non tristique. Suspendisse potenti. Nunc id dui non diam luctus imperdiet.
## Grob
Quisque fringilla urna sit amet elit ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. In posuere tellus suscipit sapien rhoncus euismod. Phasellus eu ligula mollis, finibus tortor ut, consectetur metus. Vestibulum eget leo felis.
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('headers innerText may happen more than once', () => {
const mdContent = '[toc]\n\n# Title\n\n## Section 1\n\n### Subsection 1\n\n### Subsection 2\n\n## Section 2\n\n### Subsection 1\n\n### Subsection 2\n\n## Section 3\n\n### Subsection 1\n\n### Subsection 2'
const htmlContent = ` Title
Section 1
Subsection 1
Subsection 2
Section 2
Subsection 1
Subsection 2
Section 3
Subsection 1
Subsection 2
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('and sometimes slugify with suffix may generate another existing header', () => {
const mdContent = '[[toc]]\n\n# header\n\n## header\n\n## header 1'
const htmlContent = `
`
expect(commonMd.render(mdContent)).toBe(htmlContent)
})
test('containerId is set correctly', () => {
const md = getMarkdownIt()
.use(markdownItTocDoneRight, {
containerId: 'toc'
})
const mdContent = '${toc}'
const htmlContent = ''
expect(md.render(mdContent)).toBe(htmlContent)
})
test('level(Int Type) option should work as expected', () => {
const md = getMarkdownIt()
.use(markdownItAnchor, {
permalink: true,
permalinkBefore: true,
permalinkSymbol: '§',
level: 2
})
.use(markdownItTocDoneRight, { level: 2 })
const mdContent = '${toc}\n\n# header\n\n## header\n\n## header 2'
const htmlContent = `header
`
expect(md.render(mdContent)).toBe(htmlContent)
})
test('level(Array Type) option should work as expected', () => {
const md = getMarkdownIt()
.use(markdownItAnchor, {
permalink: true,
permalinkBefore: true,
permalinkSymbol: '§',
level: [1, 2]
})
.use(markdownItTocDoneRight, { level: [1, 2] })
const mdContent = '${toc}\n\n# header\n\n## header\n\n## header 1\n\n# header 4\n\n## header 5\n\n## header 1'
const htmlContent = `
`
expect(md.render(mdContent)).toBe(htmlContent)
})
test('uniqueSlugStartIndex set to 0', () => {
const md = getMarkdownIt()
.use(markdownItAnchor, {
permalink: true,
permalinkBefore: true,
permalinkSymbol: '§',
level: [1, 2],
uniqueSlugStartIndex: 0
})
.use(markdownItTocDoneRight, { uniqueSlugStartIndex: 0 })
const mdContent = '[toc]\n\n# header\n\n## header'
const htmlContent = `
`
expect(md.render(mdContent)).toBe(htmlContent)
})
test('all other options should work as expected', () => {
const md = getMarkdownIt()
.use(markdownItAnchor, {
permalink: true,
permalinkBefore: true,
permalinkSymbol: '§',
slugify: uslugify
})
.use(markdownItTocDoneRight, {
placeholder: '\\@\\[\\[TOC\\]\\]',
slugify: uslugify,
containerClass: 'user-content-toc',
listClass: 'my-list',
itemClass: 'my-item',
linkClass: 'my-link',
listType: 'ul',
format: customFormat,
callback: function (html, ast) {
console.log(ast)
}
})
const mdContent = '@[[TOC]]\n\n# 日本語\n\n# 日本語\n\n # should be considered as code'
const htmlContent = ' 日本語
\n 日本語
\n# should be considered as code
\n'
expect(md.render(mdContent)).toBe(htmlContent)
})
================================================
FILE: demo.html
================================================
markdown-it-toc-done-right
================================================
FILE: dist/markdownItTocDoneRight.js
================================================
function e(e){return encodeURIComponent(String(e).trim().toLowerCase().replace(/\s+/g,"-"))}function n(e){return String(e).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}module.exports=function(r,t){var l;t=Object.assign({},{placeholder:"(\\$\\{toc\\}|\\[\\[?_?toc_?\\]?\\]|\\$\\)",slugify:e,uniqueSlugStartIndex:1,containerClass:"table-of-contents",containerId:void 0,listClass:void 0,itemClass:void 0,linkClass:void 0,level:1,listType:"ol",format:void 0,callback:void 0},t);var i=new RegExp("^"+t.placeholder+"$","i");r.renderer.rules.tocOpen=function(e,r){var l=Object.assign({},t);return e&&r>=0&&(l=Object.assign(l,e[r].inlineOptions)),"'},r.renderer.rules.tocClose=function(){return"