A table of contents, usually headed simply Contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a written work, of its chapter or section titles or brief descriptions with their commencing page numbers. Wikipedia
The plugin works particularly well with markdown documents.
By defaults
Before:
< html >
< body >
< h1 id = " title1 " > Title 1 </ h1 >
< p > p1 </ p >
< h2 id = " title2 " > Title 2 </ h2 >
< p > p2 </ p >
< h3 id = " title3 " > Title 3 </ h3 >
< p > p3 </ p >
</ body >
</ html >
After:
< html >
< body >
< h1 id = " title1 " > Title 1 </ h1 >
< div id = " toc " >
< div id = " toctitle " > Contents </ div >
< ul >
< li >
< a href = " #title2 " > Title 2 </ a >
< ul >
< li > < a href = " #title3 " > Title 3 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
< p > p1 </ p >
< h2 id = " title2 " > Title 2 </ h2 >
< p > p2 </ p >
< h3 id = " title3 " > Title 3 </ h3 >
< p > p3 </ p >
</ body >
</ html >
Installation in your project
npm i posthtml posthtml-toc
const fs = require ( ' fs ' ) ;
const posthtml = require ( ' posthtml ' ) ;
const toc = require ( ' posthtml-toc ' ) ;
posthtml ( )
. use ( toc ( { } ) )
. process ( html )
. then ( result => fs . writeFileSync ( ' ./after.html ' , result . html ) ) ;
Defaults options
title = "Content" — Title TOC blockafter = "h1" — tag after which the TOC will be inserted
after optionsSet tag, class, or id after which the TOC will be inserted
after : ' tag '
after : ' .class '
after : ' #id '
toggle optionsBefore:
< html >
< body >
< h1 id = " title1 " > Title 1 </ h1 >
< p > p1 </ p >
< h2 id = " title2 " > Title 2 </ h2 >
< p > p2 </ p >
< h3 id = " title3 " > Title 3 </ h3 >
< p > p3 </ p >
</ body >
</ html >
Add option:
const fs = require ( ' fs ' ) ;
const posthtml = require ( ' posthtml ' ) ;
const toc = require ( ' posthtml-toc ' ) ;
posthtml ( )
. use ( toc ( {
toggle : [ ' show ' , ' hide ' , true ]
} ) )
. process ( html )
. then ( result => fs . writeFileSync ( ' ./after.html ' , result . html ) ) ;
After:
< html >
< body >
< h1 id = " title1 " > Title 1 </ h1 >
< style >
# toctoggle , # toctoggle : checked ~ ul { display : none }
# toctoggle ~ label : after { content : " hide " }
# toctoggle : checked ~ label : after { content : " show " }
# toc label { cursor : pointer }
</ style >
< div id = " toc " >
< input type = " checkbox " role = " button " id = " toctoggle " checked >
< h2 > Content </ h2 >
< label for = " toctoggle " > < / label >
< ul >
< li >
< a href = " #title2 " > Title 2 </ a >
< ul >
< li > < a href = " #title3 " > Title 3 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
< p > p1 </ p >
< h2 id = " title2 " > Title 2 </ h2 >
< p > p2 </ p >
< h3 id = " title3 " > Title 3 </ h3 >
< p > p3 </ p >
</ body >
</ html >
See PostHTML Guidelines and contribution guide .
MIT 
[![Standard Code Style][style]][style-url]