markdown-it-attrs
![npm version](https://badge.fury.io/js/markdown-it-attrs.svg)
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.
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.
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
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