Skip to content
Render markdown inside html elements.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.eslintrc.json
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
rollup.config.js

README.md

PostHTML-Markdown

posthtml-markdown is a markdown plugin for posthtml that let's you use markdown inside html elements easily.

There's already posthtml-md, but it has long standing bugs and the codebase is more complicated than necessary and prone to breakage.

This plugin:

  • recognizes any tag with md or markdown attribute (attribute is removed)
  • recognizes md and markdown tags (tag is removed)
  • treats pre tags with md or markdown attribute as markdown tags
  • does a decent job of NOT putting block-level elements inside inline elements (You still need to write valid markdown, like not putting # Headings in p tags)

Example

<h1 markdown>Heading with *italics*</h1>
Will produce
<h1>Heading with <em>italics</em>


<p markdown>
	**Bold** paragraph
</p>
Output
<p><strong>Bold</strong></p>

It also handles markdown in child elements
<body markdown>
	<div class="overflow">

		| Head | row |
		|------|-----|
		| Data | row |

	</div>
</body>

You do need extra empty lines around markdown in unmarked `div`s
This will look like
<body>
	<div class="overflow">
		<table>
		<thead>
		<tr>
		<th>Head</th>
		<th>row</th>
		</tr>
		</thead>
		<tbody>
		<tr>
		<th>Data</th>
		<th>row</th>
		</tr>
		</tbody>
	</div>
</body>

Options

All options are passed to marked directly, except for:

  • whitespce (string; default: '\t'): String to use for indentation. It should consist of characters representing one level of indentation.

Install

posthtml-markdown is available on npm:

npm i -D posthtml-markdown

Usage

PostHTML

posthtml = require('posthtml');

posthtml([require('posthtml-markdown')({/* options */})])
	.process(html)
	.then((output) => {/*...*/});

Rollup

import posthtml from 'rollup-plugin-posthtml-multi';
import markdown from 'posthtml-markdown';

module.exports = {
	/*...*/
	plugins: [
		posthtml({
			plugins: [markdown({/* options */})],
		}),
	],
};
You can’t perform that action at this time.