HTML/XML processor
npm install posthtmlPostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.
All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.
For more detailed information about PostHTML in general take a look at the docs.
| Name | Description |
|:----:|:-----------:|
|posthtml-parser| Parser HTML/XML to PostHTMLTree |
|posthtml-render| Render PostHTMLTree to HTML/XML |
``bash`
npm init posthtml
`bash`
npm i -D posthtml
Sync
`js
import posthtml from 'posthtml'
const html =
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, { sync: true })
.html
console.log(result)
`
`html`
Super Title
Awesome Text
> :warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible.
Async
`js
import posthtml from 'posthtml'
const html =
OMG
posthtml(
[
require('posthtml-to-svg-tags')(),
require('posthtml-extend-attrs')({
attrsTree: {
'.wow' : {
id: 'wow_id',
fill: '#4A83B4',
'fill-rule': 'evenodd',
'font-family': 'Verdana'
}
}
})
])
.process(html/, options /)
.then((result) => console.log(result.html))
``html
`Directives
`js
import posthtml from 'posthtml'const php =
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, {
directives: [
{ name: '?php', start: '<', end: '>' }
]
})
.html
console.log(result)
``html
`$3
`bash
npm i posthtml-cli
``json
"scripts": {
"posthtml": "posthtml -o output.html -i input.html -c config.json"
}
``bash
npm run posthtml
`$3
`bash
npm i -D gulp-posthtml
``js
import tap from 'gulp-tap'
import posthtml from 'gulp-posthtml'
import { task, src, dest } from 'gulp'task('html', () => {
let path
const plugins = [ require('posthtml-include')({ root:
${path} }) ]
const options = {} src('src/*/.html')
.pipe(tap((file) => path = file.path))
.pipe(posthtml(plugins, options))
.pipe(dest('build/'))
})
`Check project-stub for an example with Gulp
$3
`bash
npm i -D grunt-posthtml
``js
posthtml: {
options: {
use: [
require('posthtml-doctype')({ doctype: 'HTML 5' }),
require('posthtml-include')({ root: './', encoding: 'utf-8' })
]
},
build: {
files: [
{
dot: true,
cwd: 'html/',
src: ['*.html'],
dest: 'tmp/',
expand: true,
}
]
}
}
`$3
`bash
npm i -D html-loader posthtml-loader
`#### v1.x
webpack.config.js
`js
const config = {
module: {
loaders: [
{
test: /\.html$/,
loader: 'html!posthtml'
}
]
},
posthtml: (ctx) => ({
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
})
}export default config
`#### v2.x
webpack.config.js
`js
import { LoaderOptionsPlugin } from 'webpack'const config = {
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
},
{
loader: 'posthtml-loader'
}
]
}
]
},
plugins: [
new LoaderOptionsPlugin({
options: {
posthtml(ctx) {
return {
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
}
}
}
})
]
}
export default config
`$3
`bash
$ npm i rollup-plugin-posthtml -D
or
$ npm i rollup-plugin-posthtml-template -D
``js
import { join } from 'path';import posthtml from 'rollup-plugin-posthtml-template';
// or
// import posthtml from 'rollup-plugin-posthtml';
import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D
import include from 'posthtml-include'; // npm i posthtml-include -D
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
parser: sugarml(),
plugins: [include()],
template: true // only rollup-plugin-posthtml-template
})
]
};
`Parser
`js
import pug from 'posthtml-pug'posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
``| Name |Description|
|:-----|:----------|
|posthtml-pug|Pug Parser|
|sugarml|SugarML Parser|
In case you want to develop your own plugin, we recommend using [posthtml-plugin-starter][plugin] to get started.
- posthtml-plugins
- awesome-posthtml
[plugin]: https://github.com/posthtml/posthtml-plugin-starter
Ivan Demidov | Ivan Voischev |
Thank you to all our backers! 🙏 [Become a backer]
[chat]: https://badges.gitter.im/posthtml/PostHTML.svg
[chat-url]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"