JSPM

  • Created
  • Published
  • Downloads 198350
  • Score
    100M100P100Q167776F
  • License MIT

Add classes, identifiers and attributes to your markdown with {} curly brackets, similar to pandoc's header attributes

Package Exports

  • markdown-it-attrs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markdown-it-attrs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

markdown-it-attrs Build Status npm version

Add classes, identifiers and attributes to your markdown with {.class #identifier attr=value attr2="spaced value"} curly brackets, similar to pandoc's header attributes.

Example input:

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Works with inline elements too:

paragraph *style me*{.red} more text

Output:

<p>paragraph <em class="red">style me</em> more text</p>

Note: Plugin does not validate any input, so you should validate the attributes in your html output if security is a concern.

Ambiguity

When class can be applied to both inline or block element, inline element will take precedence:

- list item **bold**{.red}

Output:

<ul>
<li>list item <strong class="red">bold</strong></li>
<ul>

If you need the class to apply to the list item instead:

- list item **bold**
{.red}

Output:

<ul>
<li class="red">list item <strong>bold</strong>
</li>
</ul>

If you need finer control, look into decorate.

Install

$ npm install --save markdown-it-attrs

Usage

var md = require('markdown-it')();
var markdownItAttrs = require('markdown-it-attrs');

md.use(markdownItAttrs);

var src = '# header {.green #id}\nsome text {with=attrs and="attrs with space"}';
var res = md.render(src);

console.log(res);

demo as jsfiddle

License

MIT © Arve Seljebu