rehype-decorate

Add CSS classes to Markdown using Rehype

Write prettier Markdown

rehype-decorate lets you add CSS classnames to Markdown.

# This is markdown

<!-- {.large-heading} -->

The `h1` above will have a CSS class name `large-heading` applied to it. We do
this without extending Markdown syntax. The HTML comment will be invisible
where regular Markdown parsers can't see it, making your Markdown render just
as normal Markdown.

Cool, isn't it?

Install

yarn add rehype-decorate@next

Usage

rehype-decorate works with Rehype syntax trees. These can be generated by many tools, including the Remark Markdown parser. It exposes a function, decorate(), which takes in a HAST tree, and exports a HAST tree as well:

import decorate from 'rehype-decorate'

htmlAst = decorate(htmlAst)

Unified example

Here's an example using unified, which parses Markdown via Remark, converts it to Rehype format via remark2rehype, uses rehype-decorate, then converts it to a string via rehype-stringify:

import decorate from 'rehype-decorate'
import unified from 'unified'
import stream from 'unified-stream'
import markdown from 'remark-parse'
import remark2rehype from 'remark-rehype'
import html from 'rehype-stringify'

processor = unified()
  .use(markdown)
  .use(remark2rehype)
  .use(decorate)
  .use(html)

const input = '# hello world\n\n<!-- {.heading} -->'

processor.process(input, (err, file) => {
  console.log(String(file))
})

Thanks

rehype-decorate © 2018+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
Thanks to Chaparra for the icon.

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz