You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The syntaxhighlight plugin provides its own wrappers for code blocks (src/markdownSyntaxHighlightOptions.js:36) which overrides the default wrapper provided by markdown-it/markdown-it#189. Unfortunatly that leaves no room to customize the generated markup as we cannot use a custom renderer rule for code fence blocks. Removing the wrapper from the plugin however, would result in a breaking change as some sites may use the class on the <pre> tag as a styling hook.
Would you be open for a PR that implements an additional option to add custom attributes to the <pre> tag? I would love to display the highlighted language next to my code blocks. Currently my only option would be to do this entirely in CSS:
I'd absolutely be on board for this; currently doing the same thing as @dweidner in my build.
Globally, I'd like to be able to provide a list of attributes, so we could do what is suggested here, and add more CSS classes (for additional context, I am a big user of utility classes and would love to be able to add some arbitrary classes directly in the markup alongside this enhancement, reducing duplicate declarations in my stylesheets).
EDIT: After more thought, I think my "needs" go beyond the scope of this issue. Adding some markup (a wrapper) might be what I really need to do, but regardless I think this issue is 100% valid and would be happy to try and help on it.
I agree that this feature is needed. It goes further than displaying the language for the code block, this is an accessibility issue. Without the ability to add attributes to the <pre> it is impossible to set tabindex="0" to make code blocks that have scrollbars accessible to keyboard users.
The syntaxhighlight plugin provides its own wrappers for code blocks (src/markdownSyntaxHighlightOptions.js:36) which overrides the default wrapper provided by markdown-it/markdown-it#189. Unfortunatly that leaves no room to customize the generated markup as we cannot use a custom renderer rule for code fence blocks. Removing the wrapper from the plugin however, would result in a breaking change as some sites may use the class on the
<pre>
tag as a styling hook.Would you be open for a PR that implements an additional option to add custom attributes to the
<pre>
tag? I would love to display the highlighted language next to my code blocks. Currently my only option would be to do this entirely in CSS:This would be much easier if I could add a data attribute to the
<pre>
tag:The text was updated successfully, but these errors were encountered: