posthtml-toc
v1.0.3
Published
PostHTML Title of Contents
Downloads
9
Maintainers
voischevReadme
PostHTML TOC
[![Standard Code Style][style]][style-url]
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>Install
Installation in your project
npm i posthtml posthtml-toc
Usage
const fs = require('fs');
const posthtml = require('posthtml');
const toc = require('posthtml-toc');
posthtml()
.use(toc({ /* options */ }))
.process(html/*, options */)
.then(result => fs.writeFileSync('./after.html', result.html));Options
Defaults options
title = "Content"— Title TOC blockafter = "h1"— tag after which the TOC will be inserted
after options
Set tag, class, or id after which the TOC will be inserted
after: 'tag'
after: '.class'
after: '#id'toggle options
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>Add option:
const fs = require('fs');
const posthtml = require('posthtml');
const toc = require('posthtml-toc');
posthtml()
.use(toc({
toggle: ['show', 'hide', true]
}))
.process(html/*, options */)
.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>Contributing
See PostHTML Guidelines and contribution guide.