remark-classes

Adding custom classes to nodes

installation

yarn add remark-classes

usage

Say we have the following markdown:

highlight> Node with classname highlight.

noindex> Node with classname noindex.

ext> Node with classname ext.

And our script looks as follows:

import ReactMarkdown from "react-markdown";
import remarkClasses from "remark-classes";

function Markdown() {
    const markdown = "# Heading \nhighlight> Node with classname highlight. <div>Render HTML as text</div>. \n\nnoindex> Node with classname  noindex.\n\next> Node with classname ext.";
    return (
        <ReactMarkdown plugins={[remarkClasses()]} children={markdown} allowDangerousHtml/>
    )
}

Now, running it yields:

<h1>Heading</h1>
<p class="highlight">Node with classname highlight. &lt;div&gt;Render HTML as text&lt;/div&gt;.</p>
<p class="noindex">Node with classname  noindex.</p>
<p class="ext">Node with classname ext.</p>

TODO:

Custom classnames