unified

Project: martypdx/rehype-add-classes

Package: rehype-add-classes@1.0.0

  1. Dependents: 0
  2. Add classes by selector to a rehype HAST (html tree)

    rehype-add-classes

    Consider using this fork of the project which is currently being maintained:

    https://github.com/tycol7/rehype-add-classes


    Add classes by selector to elements with rehype.

    Useful for adding:

    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'
    }       
    

    This library uses hast-util-select under the hood. See these details for supported selectors.

    License

    MIT ©2018 Marty Nelson