posthtml-content

Flexible content transform for PostHTML


Keywords
html, posthtml, content, posthtml-plugin
License
MIT
Install
npm install posthtml-content@0.0.1

Documentation

PostHTML Content

npm tests dependencies coverage

A plugin for posthtml that allows customized content transforms.

Note: This project is in early development, and versioning is a little different. Read this for more details.

Why should you care?

Rather than having a separate plugin for each kind of content transform you want to be able to do, why not just have one? Parse natural language, markdown, or whatever else you want with a minimalistic and simple interface 🍻

Installation

npm install posthtml-content -S

Note: This project is compatible with node v6+ only

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.

<p windoge>Please use windows 98</p>

Now pass in an object to posthtml-content. Each key in the object represents an attribute that will be searched for in the html. The value is a function that will get that element's contents as a string, and replace the contents with whatever string is returned from the function.

const content = require('posthtml-content')({
  windoge: (str) => str.replace(/windows/g, 'winDOGE')
})

posthtml([plugin]).process(html)

The plugin will remove the custom attribute from the element and replace its contents with your transformed version. Wow!

<p>Please use winDOGE 98</p>

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.

<p md>Wow, it's **markdown**!</p>
const MarkdownIt = require('markdown-it')
const md = new MarkdownIt() // can pass options here
const content = require('posthtml-content')({
  md: md.renderInline.bind(md)
})

posthtml([plugin]).process(html)
<p>Wow, it's <strong>markdown</strong>!</p>

License & Contributing