What version of astro are you using?

2.1.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Currently there's no way to add a language label on top of the shiki code block, currently we are rendering the shiki code block this way:

<pre is:raw class="astro-code" style="..">
  <code>..</code>
</pre>

What will solve the issue, is to have some attribute in the <pre> tag that has the language name, like data-lang="js" or rel="html" or even inside the classname like: class="astro-code js":

<pre data-lang="html" is:raw class="astro-code" style="..">
  <code>..</code>
</pre>

And using css we will render the label:

.prose pre::before {
  content: attr(data-lang);
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  ..
}

The result would be something like the following:

Currently I found only two mentions (discussions) on this issue:

• Improve markdown code blocks: adding language and user attributes roadmap#491
• Add `data-language` or something to identify the parsed code block. roadmap#276

Link to Minimal Reproducible Example

N/A

Participation

• I am willing to submit a pull request for this issue.