markdown-it-attrs

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>

And fenced code blocks:

```python {data=asdf}
nums = [x for x in range(10)]
```

Output:

<pre><code data="asdf" class="language-python">
nums = [x for x in range(10)]
</code></pre>

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

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

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, use a space:

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

Output:

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

If you need the class to apply to the ul element, use a new line:

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

Output:

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

Unfortunately, as of now, attributes on new line will apply to opening ul or ol for previous list item:

- applies to
  - ul of last
  {.list}
{.item}


- here
  - we get
  {.blue}
- what's expected
{.red}

Which is not what you might expect. Suggestions are welcome. Output:

<ul>
  <li>applies
    <ul class="item list">
      <li>ul of last</li>
    </ul>
  </li>
</ul>

<ul class="red">
  <li>here
    <ul class="blue">
      <li>we get</li>
    </ul>
  </li>
  <li>what's expected</li>
</ul>

If you need finer control, look into decorate.

Custom blocks

markdown-it-attrs will add attributes to any token.block == true with {}-curlies in end of token.info. For example, see markdown-it/rules_block/fence.js which stores text after the three backticks in fenced code blocks to token.info.

Remember to render attributes if you use a custom renderer.

License

MIT © Arve Seljebu