markdown-it-header-sections

Renders this markdown

# Header 1
Text.
### Header 2
Lorem?
## Header 3
Ipsum.
# Last header
Markdown rules!

to this output (without indentation)

<section>
  <h1>Header 1</h1>
  <p>Text.</p>
  <section>
    <h3>Header 2</h3>
    <p>Lorem?</p>
  </section>
  <section>
    <h2>Header 3</h2>
    <p>Ipsum.</p>
  </section>
</section>
<section>
  <h1>Last header</h1>
  <p>Markdown rules!</p>
</section>

If you add attrs, anchor or any other plugin that adds attributes to header-tokens, sections will have the same attributes (which is useful for styling).

E.g., with attrs enabled before header-sections:

var md = require('markdown-it')()
  .use(require('markdown-it-attrs'))
  .use(require('markdown-it-header-sections'))

this markdown

# great stuff {.jumbotron}
lorem

click me {.btn .btn-default}

renders to

<section class="jumbotron">
  <h1 class="jumbotron">great stuff</h1>
  <p>lorem</p>
  <p class="btn btn-default">click me</p>
</section>

Install

npm install @gerhobbelt/markdown-it-header-sections @gerhobbelt/markdown-it

Usage

var md = require('@gerhobbelt/markdown-it')();
md.use(require('@gerhobbelt/markdown-it-header-sections'));

var src = '# first header\n';
src += 'lorem\n\n'
src += '## second header\n';
src += 'ipsum';

console.log(md.render(src));

demo as jsfiddle