rehype-decorate
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.



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

 

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)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (16)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |