Add CSS classes to Markdown using Rehype
Last updated 2 years ago by rstacruz .
MIT · Original npm · Tarball · package.json
$ cnpm install rehype-decorate 
SYNC missed versions from official npm registry.


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?


yarn add rehype-decorate@next


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()

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

processor.process(input, (err, file) => {


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.  ·  GitHub @rstacruz  ·  Twitter @rstacruz


Current Tags

  • 1.0.0-rc.5                                ...           latest (2 years ago)
  • 1.0.0-rc.3                                ...           next (2 years ago)

4 Versions

  • 1.0.0-rc.5                                ...           2 years ago
  • 1.0.0-rc.3                                ...           2 years ago
  • 1.0.0-rc.2                                ...           2 years ago
  • 1.0.0-rc.1                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (16)
Dependents (0)

Copyright 2014 - 2016 © |