https://github.com/penge/toc-to-html
NPM package that changes TOC from a flat JSON array to an HTML string.
https://github.com/penge/toc-to-html
npm-package table-of-content table-of-contents toc
Last synced: about 2 months ago
JSON representation
NPM package that changes TOC from a flat JSON array to an HTML string.
- Host: GitHub
- URL: https://github.com/penge/toc-to-html
- Owner: penge
- Created: 2019-10-17T13:50:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:53:35.000Z (over 3 years ago)
- Last Synced: 2025-03-25T12:14:31.872Z (about 1 year ago)
- Topics: npm-package, table-of-content, table-of-contents, toc
- Language: JavaScript
- Homepage:
- Size: 271 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# toc-to-html
`toc-to-html` can change one-level array `toc` (table of contents)
to a nested `html` list.
## Example toc
Let's say we have `toc` that looks like this:
```js
const toc = [
{
content: 'Coffee',
slug: 'coffee',
lvl: 2
},
{
content: 'Tea',
slug: 'tea',
lvl: 2
},
{
content: 'Black tea',
slug: 'black-tea',
lvl: 3
},
{
content: 'Green tea',
slug: 'green-tea',
lvl: 3
},
{
content: 'Milk',
slug: 'milk',
lvl: 2
}
];
```
`toc` can be created by `markdown-toc`
or other if following same structure.
## Example html
The `html` we get:
```html
```
## How to use
```js
const tocToHtml = require('toc-to-html');
const toc = [
/* as above toc */
];
/* change toc to html */
const html = tocToHtml(toc, /* options */);
/* see html */
console.log(html);
```
### `options`
```js
// ...
const options = {
id: 'toc-list', // is optional
clazz: 'list' // is optional
};
const html = tocToHtml(toc, options);
```
```html
```
## When to use
- when putting `` into every
markdown file to inject the HTML at that position
takes too much time and also is nightmare
to change the position later as every file
needs to be updated
- when you need full control over where you put
the HTML by using a template library
(pug, ejs, handlebars, mustache, or other)
and passing the HTML via data
- when the HTML list created by a compiler
(marked, markdown-it, remarkable, showdown, or other)
doesn't have `id` or `class` but you need that control
or more versatility