Cannot add language label for shiki code block

[craxrev]

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.

[bluwy]

This make sense to me, but I think we should keep feature requests in https://github.com/withastro/roadmap, so closing this for now. If you'd like to contribute, the change would be at:

astro/packages/astro/components/Code.astro

Lines 38 to 52 in 465a1a5

	function repairShikiTheme(html: string): string {
	// Replace "shiki" class naming with "astro"
	html = html.replace(/<pre class="(.*?)shiki(.*?)"/, '<pre class="$1astro-code$2"');
	// Handle code wrapping
	// if wrap=null, do nothing.
	if (wrap === false) {
	html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
	} else if (wrap === true) {
	html = html.replace(
	/style="(.*?)"/,
	'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
	);
	}
	return html;
	}

The lang can be passed from

astro/packages/astro/components/Code.astro

Line 62 in 465a1a5

const html = repairShikiTheme(_html);