Compatibility with markdown-it-attrs

[AleksandrHovhannisyan]

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?

[AleksandrHovhannisyan]

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

[LeaVerou]

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.

[AleksandrHovhannisyan]

Yup, markdown-it-prism does this correctly for inline code blocks:

https://github.com/jGleitz/markdown-it-prism/blob/8c9d7202a840050ca8cf3a3d1ab2cf9ea65c68e5/src/index.ts#L243

And uses regex match-and-replace for fenced code blocks:

https://github.com/jGleitz/markdown-it-prism/blob/8c9d7202a840050ca8cf3a3d1ab2cf9ea65c68e5/src/index.ts#L213-L218