Add data-language or something to identify the parsed code block.

[LiHowe]

Can we add data-language or other attribute in the rendered <pre> block? or provide an optional config attribute to MarkdownRenderingOptions in renderMarkdown function(@astrojs/markdown-remark)?

I can not customized the style of code block when using settings: syntaxHighlight: 'prism' or syntaxHighlight: 'shiki'.

The reason why I need this is: I'm plan to add a language flag to the code block with CSS by using content like this

pre::before {
  content: attr(data-language);
  // ....
}

I can't find any language identifier in the rendered <pre> or <code> tag.

[604qgc]

Hey! This has been addressed in [email protected], @astrojs/[email protected] (withastro/astro#10739):

Adds a data-language attribute on the rendered pre elements to expose the highlighted syntax language.

For example, the following Markdown code block will expose data-language="python":

\```python
def func():
    print('Hello Astro!')
\```

This allows retrieving the language in a rehype plugin from node.properties.dataLanguage by accessing the <pre> element using { tagName: "pre" }:

// myRehypePre.js
import { visit } from "unist-util-visit";
export default function myRehypePre() {
  return (tree) => {
    visit(tree, { tagName: "pre" }, (node) => {
      const lang = node.properties.dataLanguage;
      [...]
    });
  };
}

Note: The <pre> element is not exposed when using Astro's <Code /> component which outputs flattened HTML.

The data-language attribute may also be used in css rules:

pre::before {
  content: attr(data-language);
}

pre[data-language='javascript'] {
  font-size: 2rem;
}