Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahungrynoob/showdown-toc
A markdown table of contents extension for showdown.
https://github.com/ahungrynoob/showdown-toc
markdown showdown showdown-extension table-of-content toc
Last synced: about 5 hours ago
JSON representation
A markdown table of contents extension for showdown.
- Host: GitHub
- URL: https://github.com/ahungrynoob/showdown-toc
- Owner: ahungrynoob
- License: mit
- Created: 2019-11-14T10:32:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-11T12:11:10.000Z (7 months ago)
- Last Synced: 2024-04-23T20:25:20.792Z (7 months ago)
- Topics: markdown, showdown, showdown-extension, table-of-content, toc
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 8
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# showdown-toc
[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/showdown-toc.svg?style=flat-square
[npm-url]: https://npmjs.org/package/showdown-toc
[travis-image]: https://img.shields.io/travis/ahungrynoob/showdown-toc.svg?style=flat-square
[travis-url]: https://travis-ci.org/ahungrynoob/showdown-toc
[codecov-image]: https://codecov.io/gh/ahungrynoob/showdown-toc/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/ahungrynoob/showdown-toc
[download-image]: https://img.shields.io/npm/dm/showdown-toc.svg?style=flat-square
[download-url]: https://npmjs.org/package/showdown-toc
A markdown-toc extension for [showdown](https://github.com/showdownjs/showdown).
**Features:**
- export table of contents info through closure
- output table of contents into your html string
---
## Install
### esm
```bash
$ npm i showdown-toc --save
```
### umd
```html
```
## Usage
### 1. export toc info through closure
```javascript
import Showdown from 'showdown';
import showdownToc from 'showdown-toc';
const content = 'your markdown content';
const toc = [];
const showdown = new Showdown.Converter({ extensions: [showdownToc({ toc })] });
const result = showdown.makeHtml(content);
return result;
```
The `toc` array you pass in `showdownToc` will be:
```javascript
[
{ anchor: 'header-1', level: 1, text: 'header 1' }, // # header 1
{ anchor: 'header-4', level: 4, text: 'header 4' }, // #### header 4
...
]
```
The table of contents will output by default as an ordered list `
`. You can change this to an unordered list `` by passing in a second parameter of options:
```javascript
const content = 'your markdown content';
const toc = [];
const opts = { listType: 'ul' };
const showdown = new Showdown.Converter({ extensions: [showdownToc({ toc, opts })] });
const result = showdown.makeHtml(content);
return result;
```
### 2. output table of contents into your html string
In your markdown just put a [toc] where you want a Table of Contents to appear. This extension will look for the first header after the [toc] and use whatever it finds first as the element for the rest of the TOC.
You can have multiple [toc] in a file, each one will show a Table of Contents for headers after it (and before the next [toc]).
If you move up a level from the headers being used for a [toc], the Table of Contents will stop (the assumption being you're "outside" of that section).
#### example
**Markdown Input**
```markdown
# Main Page Heading
This is the intro to the main page.
## Section 1
A story.
[toc]
### Part 1
It was a nice day.
### Part 2
There were stormy clouds on the horizon.
#### Part 2A
They were very dark.
### Part 3
Then it rained.
## Section 2
Notice the section 2 header above is not included in the TOC of section 1? That's
because each toc tag assumes it should stay in it's own section.
[toc]
### Part 1
### Part 2
#### Part 2A
Notice this heading isn't in the contents above. We only index the top level
headings in each section, to keep things tidy. You may or may not like this, but
that's the way it is. If you want to create a pull request with an option,
you're welcome to! :)
### Part 3
The End.
```
**HTML Output**
>
Main Page Heading
> This is the intro to the main page.
> Section 1
> A story.
>
> Part 1
> It was a nice day.
> Part 2
> There were stormy clouds on the horizon.
> Part 2A
> They were very dark.
> Part 3
> Then it rained.
> Section 2
> Notice the section 2 header above is not included in the TOC of section 1? That's because each toc tag assumes it should stay in it's own section.
>
> Part 1
> Part 2
> Part 2A
> Notice this heading isn't in the contents above. We only index the top level headings in each section, to keep things tidy. You may or may not like this, but that's the way it is. If you want to create a pull request with an option, you're welcome to! :)
> Part 3
> The End.
## License
[MIT](LICENSE)