Compatibility with markdown-it-attrs
AleksandrHovhannisyan opened this issue · 3 comments
One of the reasons I currently use markdown-it-prism is because it's compatible with markdown-it-attrs, which allows me to specify any custom attribute on an as-needed basis. Like this:
```js {data-copyable=true data-filename="a/file/path"}
const javascript = 'code';
```I have a use case for this: Some code blocks need to support copying to the clipboard, but others are just for show. The way I currently do this is by specifying a custom inline data-attribute and then using JavaScript to insert buttons only for code blocks that have this attribute. Other code blocks get a file name via a data-attribute that I then show using CSS's attr function.
Unfortunately, this means that I cannot use eleventy-plugin-syntaxhighlight because it ignores those attributes, so this means I can't take advantage of the tabindex enhancement for code blocks that scroll horizontally. Is there a way to forward other attributes to the pre/code tags?
In the meantime, in case this helps anyone else who runs into the same issue, I created this markdown-it plugin: https://github.com/AleksandrHovhannisyan/markdown-it-code-tabindex
Came here to report the same issue. markdown-it-attrs actually mentions how to be compatible with it:
Remember to render attributes if you use a custom renderer.
Yup, markdown-it-prism does this correctly for inline code blocks:
And uses regex match-and-replace for fenced code blocks: