rehype-add-classes's Introduction

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:

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

Installation

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

rehype-add-classes's People

Contributors

Stargazers

Watchers

rehype-add-classes's Issues

TypeScript version

In case someone need a TS version:

import selector, { Element, HastNode } from "hast-util-select";
import type { Transformer } from "unified";

const { selectAll } = selector;

const makeApplyElement = (className: string) => (element: Element) => {
	if (element.properties === undefined) element.properties = {};
	const props = element.properties;
	props.className = `${props.className ?? ""} ${className}`;
};

const toApplier = (change: Change): ((node: HastNode) => void) => {
	const applyElement = makeApplyElement(change.className);
	return (node: HastNode) => {
		selectAll(change.selector, node).forEach(applyElement);
	};
};

interface Change {
	selector: string;
	className: string;
}

export const rehypeClassName = (changes: Change[]): Transformer<HastNode> => {
	const appliers = changes.map(toApplier);
	return (node): void => {
		appliers.forEach((apply) => apply(node));
	};
};

update util-hast-select from 1.0.1 to 5.0.1?

Seems many versions have come and gone of this dependency? Maybe it's time to update it?

I am personally getting many moderate issues in my builds of a modern Svelte Kit app which is utilizing this package with older versions of it's dependencies.

Thank you! XD

Recommend Projects