rehype-add-classes

Add classes by selector to elements with rehype.

Useful for adding:

• hljs class to <pre> tag when converting markdown code snippets to html
• Required css framework classes to elements (for example using Bulma)

Installation

npm:

npm install rehype-add-classes

Usage

Consider the following example.js with rehype processor (or use unified) setup as follows:

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 details for supported selectors.

License

MIT ©2018 Marty Nelson