This PostHTML plugin compiles Markdown to HTML using markdown-it.
Before:
<markdown> # Heading 1 --- Paragraph with some text _Italic_ **Bold** - List item 1 - List item 2 - List item 3 </markdown>
After:
<h1>Heading 1</h1> <hr> <p>Paragraph with some text</p> <p> <em>Italic</em> <strong>Bold</strong> </p> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
npm i -D posthtml posthtml-markdownit
import posthtml from 'posthtml' import markdown from 'posthtml-markdownit' posthtml([ markdown() ]) .process('<markdown># Test</markdown>') .then(result => console.log(result.html)) // <h1>Test</h1>
You can import and render Markdown files:
Before:
<markdown src="./README.md"> # Imported </markdown>
After:
<!-- Here be the contents of README.md, as HTML --> <h1>Imported</h1>
Both <markdown> and <md> tags are supported.
Before:
<md> # Heading 1 </md>
After:
<h1>Heading 1</h1>
By default, the custom tags like <md> are replaced with the compiled Markdown. See the tag attribute if you need a wrapping tag around your Markdown content.
You can also use the markdown or md attributes on an HTML element:
Before:
<div md> # Heading 1 </div>
After:
<h1>Heading 1</h1>
You can use a tag attribute to wrap the resulting markup in a tag:
Before:
<md tag="section"> # Heading 1 </md>
After:
<section> <h1>Heading 1</h1> </section>
You can mark the content to be rendered inline. This is helpful if you're including a file that will be used as an inline element and don't want the enclosing p tags.
Before:
<div class="example"> <markdown src="./example.md" inline> Imported </markdown> </div>
After:
<p class="example">Imported</p>
Instead of:
<div class="example"> <p>Imported</p> </div>
Type: string
Default: ./
A path relative to which Markdown files will be imported.
Type: string
Default: utf8
Encoding for imported Markdown files.
Type: object
Default: {}
Options passed to the markdown-it library. See the available options.
Type: array
Default: []
Plugins for markdown-it.
Example:
import {light as emoji} from 'markdown-it-emoji' markdown({ plugins: [{ plugin: emoji, options: {} // Options for markdown-it-emoji }] })