About

posthtml-content allows you to define functions that map to custom HTML attributes. When the plugin runs, it will search for those attributes and apply the corresponding function to the contents of the node.

Install

``
npm i posthtml posthtml-content
`

Usage

Start with some HTML you want to transform in some way. Add an attribute of your choosing to an element that has contents you want to transform. For example:

`html


posthtml is great


`

Now process your HTML with posthtml-content:

`js
import posthtml from'posthtml'
import content from'posthtml-content'

const html = posthtml([
content({
// Map your custom attribute to a function that takes and returns a string
uppercase: str => str.toUpperCase()
})
])
.process('

posthtml is great

')
.then(result => result.html)
`

Result:

`html


POSTHTML IS GREAT


`

If you return an A+ compliant promise from your content function, it will resolve and work in your templates as well.

You can use external libraries for this as well, no problem. Just make sure you are passing in a function that takes a string and returns a string. You might have to wrap the library function if it doesn't behave like this, but it will work with anything that transforms content.

$3

You can also access the attribute's value in your function, as the second argument.

`js
import posthtml from'posthtml'
import content from'posthtml-content'

const html = posthtml([
content({
append: (content, attrValue) => content + attrValue
})
])
.process('

foo

')
.then(result => result.html)
`

Result:

`html


foo bar


`

Examples

$3

`html


Wow, it's Markdown!


`

`js
import markdown from 'markdown-it'
import content from 'posthtml-content'

const {html} = await posthtml([
content({
md: md => markdown.renderInline(md)
})
]).process(html)
`

Result:

`html


Wow, it's Markdown!


`

$3

`postcss

`

`js
import postcss from 'postcss'
import nested from 'postcss-nested'
import content from 'posthtml-content'

const plugin = content({
postcss: css => postcss(nested()).process(css).css
})

const {html} = await posthtml([plugin]).process(html)
`

Result:

`html

`

$3

`html

`

`js
import babel from 'babel-core'
import content from 'posthtml-content'

const options = {
presets: ['es2015'],
sourceMaps: false
}

const plugin = content({
babel: js => babel.transform(js, options).code
})

const {html} = await posthtml([plugin]).process(html)
`

Result:

`html

`

$3

`postcss

`

`js
import postcss from 'postcss'
import nested from 'postcss-nested'
import content from 'posthtml-content'

const plugin = content({
postcss: css => {
return postcss(nested()).process(css).then(res => res.css)
}
})

const {html} = await posthtml([plugin]).process(html)
`

License

posthtml-content` is open-sourced software licensed under the MIT license.

[npm]: https://www.npmjs.com/package/posthtml-content
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-content.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-content
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-content.svg
[github-ci]: https://github.com/posthtml/posthtml-content/actions/workflows/nodejs.yml
[github-ci-shield]: https://github.com/posthtml/posthtml-content/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-content.svg