Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatibility with markdown-it-attrs #72

Open
AleksandrHovhannisyan opened this issue Aug 3, 2022 · 3 comments
Open

Compatibility with markdown-it-attrs #72

AleksandrHovhannisyan opened this issue Aug 3, 2022 · 3 comments

Comments

@AleksandrHovhannisyan
Copy link

AleksandrHovhannisyan commented Aug 3, 2022

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 added a commit to AleksandrHovhannisyan/aleksandrhovhannisyan.com that referenced this issue Aug 5, 2022
@AleksandrHovhannisyan
Copy link
Author

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
Copy link

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
Copy link
Author

AleksandrHovhannisyan commented Aug 29, 2024

TrebledJ added a commit to TrebledJ/trebledj.github.io that referenced this issue Sep 5, 2024
11ty-syntax-hl doesn't work well with markdown-it-attr. So taking a hint from [this issue](11ty/eleventy-plugin-syntaxhighlight#72), I'm switching to markdown-it-prism, which also renders PrismJS in node.

At the same time, I decided to use a custom fence renderer which will render attributes in the `pre` block instead of the `code` block. Relevant issue: arve0/markdown-it-attrs#152.

I should also mention markdown-it-prism has a bonus of highlighting inline code blocks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants