Allow to customize attributes applied to the <pre>/<code> tags

[dweidner]

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:

pre[class$='css'],
pre[class$='scss'],
pre[class$='js'],
pre[class$='php'] {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    // ...
  }
}

pre[class$='css']::after  { content: 'CSS' }
pre[class$='scss']::after { content: 'SCSS' }
pre[class$='js']::after   { content: 'JavaScript' }
pre[class$='php']::after  { content: 'PHP' }
// …

This would be much easier if I could add a data attribute to the <pre> tag:

pre[class|="language"][data-language] {
  position: relative;

  &::after {
    content: attr(data-language);
    // …
  }
}

[chriskirknielsen]

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.

[andria-dev]

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.

More information about this can be found on the Accessibility Insights scrollable-region-focusable page.