https://github.com/posthtml/posthtml-content
Apply functions to tags through custom attributes
https://github.com/posthtml/posthtml-content
Last synced: 10 months ago
JSON representation
Apply functions to tags through custom attributes
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-content
- Owner: posthtml
- License: mit
- Created: 2016-06-24T20:56:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-26T20:11:07.000Z (over 1 year ago)
- Last Synced: 2024-10-29T21:06:04.524Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.1 MB
- Stars: 23
- Watchers: 5
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
PostHTML Content
Apply functions to nodes through custom attributes
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![Downloads][npm-stats-shield]][npm-stats]
[![License][license-shield]][license]
## 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](https://promisesaplus.com/) 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.
### Using the attribute's value
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
### Markdown
```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!
```
### PostCSS
```postcss
.test
text-transform: uppercase;
&__hello
color: red;
&__world
color: blue;
```
```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
.test {
text-transform: uppercase;
}
.test__hello {
color: red;
}
.test__world {
color: blue;
}
```
### Babel
```html
const hello = 'Hello World!'
let greeter = {
greet(msg) { alert (msg) }
}
greeter.greet(hello)
```
```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
'use strict';
var hello = "Hello World!";
var greeter = {
greet: function greet (msg) {
alert(msg);
};
};
greeter.greet(hello);
```
### Return a Promise
```postcss
.test
text-transform: uppercase;
&__hello
color: red;
&__world
color: blue;
```
```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](https://opensource.org/licenses/MIT).
[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