markdown-it-classy
This is a plugin for the markdown-it markdown parser.
Need to style some text written with markdown but are lacking that extra oomph? Plug in markdown-it-classy
.
Install
$ npm install --save markdown-it-classy
or, if using bower:
$ bower install --save markdown-it-classy
or, just grab dist/markdown-it-classy.js
and add it to your project.
Plug
For NodeJS and other environments that expose require
:
var classy = require("markdown-it-classy"),
MarkdownIt = require("markdown-it"),
md = new MarkdownIt();
md.use(classy);
If you're using markdown-it-classy
in the browser without require
support, you can find it on the global object:
var classy = window.markdownItClassy;
md.use(classy);
Use
Anything in curly brackets ({}
) gets interpreted as a class string for that element.
This is paragraph 1.
This is paragraph 2 and I wish there was a way to make it blue.
{blue}
converts to:
This is paragraph 1. This is paragraph 2 and I wish there was a way to make it blue.
Go crazy (or not)
# All kinds of headings work! {classy}
## Atx... {classy} ##
... and Setext {classy}
---
_em {classy}_ and __strong {classy}__ are supported as well.
{classy}
- so
- are
- ul tags
{classy}
> blockquotes?
> {classy}
>
> why not!
{classy}
converts to:
All kinds of headings work! Atx... ... and Setext em and strong are supported as well. so are ul tags blockquotes? why not!
Very classy indeed!
Nested elements
Because of the way the CommonMark spec keeps track of nested elements (eg. a paragraph inside a blockquote), there is a slight gotcha when it comes to specifying classes for one or the other. So while adding classes to paragraphs only is straightforward:
Something or other. {someclass}
=> <p class="someclass">Something or other.</p>
Something or other.
{someclass}
with blockquotes, the situation is a bit more involved:
> Something or other. {someclass} => <blockquote><p class="someclass">Something or other.</p></blockquote>
HOWEVER!
> Something or other.
{someclass}
=> <blockquote class="someclass"><p>Something or other.</p></blockquote>
> Something or other.
> {someclass}
So basically, if the class statement is after a newline, it gets applied to the outer element, and if it's inline, it's applied to the inner element.
The same applies for lists:
- something {item-class-one}
- other {item-class-two} => <ul class="list-class"><li class="item-class-one">something</li><li class="item-class-two">other</li><ul>
{list-class}
Disclaimer
This purposefully doesn't conform to any spec or discussion related to CommonMark. It's only ever useful if you want to add classes to some Markdown and nothing else. A possible use case could be if you wanted to give users a very limited styling capability beyond em and strong.