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.

Table of contents

Examples

Output:
`html


header

Works with inline elements too:
`md
paragraph style me{.red} more text
`

Output:
`html


paragraph style me more text

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

Output:
`html


nums = [x for x in range(10)]

You can use .. as a short-hand for css-module=:

`md
Use the css-module green on this paragraph. {..green}
`

Output:
`html


Use the css-module green on this paragraph.

`md
paragraph with [a style me span]{.red}
`

Output:
`html


paragraph with a style me span

`
$ npm install --save markdown-it-attrs
`

Support

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

md.use(markdownItAttrs, {
// optional, these are default options
leftDelimiter: '{',
rightDelimiter: '}',
allowedAttributes: [] // empty array = all attributes are allowed
});

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

console.log(res);
`

demo as jsfiddle

Security

`js
md.use(markdownItAttrs, {
allowedAttributes: ['id', 'class', /^regex.*$/]
});
`

Now only id, class and attributes beginning with regex are allowed:

`md
text {#red .green regex=allowed onclick=alert('hello')}
`

Output:
`html


text

`md
_i want all of this{target="_blank"} to be italics_
`

Above example will render to:
`html


_i want all of this{target="blank"} to be italics

...which is probably not what you wanted. Of course, you could use * for
italics to solve this parsing issue:

`md
i want all of this{target="_blank"} to be italics
`

Output:
`html


i want all of this to be italics

Output:
`html


• list item bold



`

If you need the class to apply to the list item instead, use a space:
`md
- list item bold {.red}
`

Output:
`html




• list item bold



`

If you need the class to apply to the

element, use a new line:
`md
- list item bold
{.red}
`

Output:
`html




• list item bold



`

If you have nested lists, curlys after new lines will apply to the nearest

or
. You may force it to apply to the outer
by adding curly below on a paragraph by its own:
`md
- item
- nested item {.a}
{.b}

{.c}
`

Output:
`html




• item
  
  
  
  • nested item
  
  
  
  



`

This is not optimal, but what I can do at the momemnt. For further discussion, see https://github.com/arve0/markdown-it-attrs/issues/32.

Similar for tables, attributes must be _two_ new lines below:
`md
header1 | header2
------- | -------
column1 | column2

{.special}
`

Output:
`html

















header1	header2
column1	column2


`

Wellformed the table's _rowspan_ and/or _colspan_ attributes, usage sample below:
`md
| A | B | C | D |
| ----------------------- | --- | --- | ---------------- |
| 1 | 11 | 111 | 1111 {rowspan=3} |
| 2 {colspan=2 rowspan=2} | 22 | 222 | 2222 |
| 3 | 33 | 333 | 3333 |

{border=1}
`

Output:
`html




























A	B	C	D
1	11	111	1111
2		22
		3


`

If you need finer control, decorate might help you.

Custom rendering


If you would like some other output, you can override renderers:

`js
const md = require('markdown-it')();
const markdownItAttrs = require('markdown-it-attrs');

md.use(markdownItAttrs);

// custom renderer for fences
md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
const token = tokens[idx];
return ''
+ '' + token.content + ''
+ '';
}

let src = [
'',
'`js {.abcd}',
'var a = 1;',
'`'
].join('\n')

console.log(md.render(src));
`

Output:
`html


var a = 1;


`

Read more about custom rendering at markdown-it.




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.

Custom delimiters

To use different delimiters than the default, add configuration for leftDelimiter and rightDelimiter:

`js
md.use(attrs, {
leftDelimiter: '[',
rightDelimiter: ']'
});
`

Which will render

`md


title [.large]


`

as

`html


title


`

Development


Tests are in test.js.

Run all tests:
`sh
npm test
`

Run particular test:
`sh
npm test -- -g "not crash"
`

In tests, use helper function replaceDelimiters to make test run with
different delimiters ({}, [] and [[]]).

For easy access to HTML output you can use debug.js:

`sh
node debug.js # will print HTML output
``

Please do not submit pull requests with changes in package version or built
files like browser.js.

License

MIT © Arve Seljebu