Add classes by selector to elements with rehyperehype.
Useful for adding:
Now, running
Add to
Example:
This library uses
Useful for adding:
hljs
class to<pre>
tag when converting markdown code snippets to html- Required css framework classes to elements (for example using Bulmabulma)
Installation
npm install rehype-add-classes## Usage
Consider the following `example.js` with rehype processor (or use unified) setup as follows:
```javascript
import rehype from 'rehype';
import vfile from 'to-vfile';
import addClasses from 'rehype-add-classes';
const processor = rehype()
.data('settings', { fragment: true })
.use(addClasses, {
pre: 'hljs',
'h1,h2,h3': 'title',
h1: 'is-1',
h2: 'is-2',
p: 'one two'
});
const html = `
<pre><code></code></pre>
<h1>header</h1>
<h2>sub 1</h2>
<h2 class="existing">sub 2</h2>
<p></p>
`;
const { contents } = processor.processSync(vfile({ contents: html }));
console.log(contents);
Now, running
node example.js
yields:<pre class="hljs"><code></code></pre>
<h1 class="title is-1">header</h1>
<h2 class="title is-2">sub 1</h2>
<h2 class="existing title is-2">sub 2</h2>
<p class="one two"></p>
API
rehype().use(addClasses, additions])
Add to rehype
or unified
pipeline with .use
, where additions
is an object
with keys that are the css selectors and the values are a string to add to
the class
of each found node.Example:
{
pre: 'hljs',
'h1,h2,h3': 'title',
h1: 'is-1',
h2: 'is-2',
p: 'one two'
}
- Results are cumulative:
<h1 class="title is-1">
value
is added to existing classes:<h2 class="existing title is-2">sub 2</h2>
- Whole of string indicated by
value
is added:<p class="one two">
This library uses
hast-util-select
under the hood. See these detailssupported-selectors
for supported selectors.