posthtml-md is a markdown plugin for PostHTML that lets you use markdown within HTML elements in an easy and intuitive way.
Main features:
- Works on any tag with a
md
ormarkdown
property - Knows when to write inline or block-level content
- Will replace element if tag is
<md>
or<markdown>
- Will treat
pre
tag withmd
ormarkdown
property as<md>
tag
From:
<h1 md>
PostCSS **Markdown**
</h1>
<div md>
It knows
*when* to work.
</div>
<p markdown>
It knows
*how* to work.
</p>
<p>
It knows
*what* to ignore.
</p>
<md>
It just [works](https://github.com/jonathantneal/posthtml-md).
</md>
<pre md>
It knows
- When
- How
- What
</pre>
To:
<h1>
PostCSS <strong>Markdown</strong>
</h1>
<div>
<p>It knows</p>
<p><em>when</em> to work.</p>
</div>
<p>
It knows <em>how</em> to work.
</p>
<p>
It knows
*what* to ignore.
</p>
<p>It just <a href="https://github.com/jonathantneal/posthtml-md">works</a>.</p>
<p>It knows</p>
<ul>
<li>When</li>
<li>How</li>
<li>What</li>
</ul>
Install posthtml-md from npm
npm install posthtml-md --save-dev
Add PostHTML to your build tool:
npm install posthtml --save-dev
Load posthtml-md as a PostHTML plugin:
posthtml([
require('posthtml-md')({ /* options */ })
]).process(YOUR_HTML, /* options */);
To use posthtml-md with ParcelJS please make a .posthtmlrc
file with the content
{
"plugins": {
"posthtml-md": {
"root": "src"
}
}
}
Change the root
attribute to your actual root folder
require('posthtml-md').process(YOUR_HTML, { /* options */ });
Add Gulp PostHTML to your build tool:
npm install gulp-posthtml --save-dev
Enable posthtml-md within your Gulpfile:
var posthtml = require('gulp-posthtml');
gulp.task('html', function () {
return gulp.src('./src/*.html').pipe(
posthtml([
require('posthtml-md')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});
Add Grunt PostHTML to your build tool:
npm install grunt-posthtml --save-dev
Enable posthtml-md within your Gruntfile:
grunt.loadNpmTasks('grunt-posthtml');
grunt.initConfig({
posthtml: {
options: {
use: [
require('posthtml-md')({ /* options */ })
]
},
dist: {
src: '*.html'
}
}
});