Improve markdown code blocks: adding language and user attributes

[EmNudge]

Body

Summary

Add back the parsed language from code blocks into the resulting markup.

Background & Motivation

In earlier versions of Astro, code blocks included the language and did not have inline styling. Currently, code blocks do not have the language included in the resulting markup.

While the code is styled as if it is javascript, the js string was not added to any part of the resulting markup. I had code that relied on being able to parse what kind of language the code block was. If it was JavaScript, special considerations could be made.

Goals

• Add back language to resulting markup. Perhaps as a class name in the <pre> tag.
• Allow for additional metadata applied to code blocks. Extend remark syntax.

Example

Astro code:

```js
console.log('hi');
\```

Resulting markup:

<pre class="astro-code js">
<code>
<!-- some highlighted markup -->
</code>
</pre>

[delucis]

Hey @EmNudge — the inline styling is provided by Shiki which is what Astro uses to process code blocks by default.

However, you can still choose to switch to Prism for syntax highlighting and retain the older behaviour you preferred. See the Syntax highlighting guide in the Astro Docs for more details.

[EmNudge]

Yeah, the background color specifically seems to be from Shiki, not Astro's shiki remark plugin. Thanks for the comment!

The removal of language is easily fixed within Astro however. I'm going to edit this discussion to be more specific to the language attribute.

[bluwy]

This seems to be the same as #276

[naiyerasif]

If you're OK with using a Rehype plugin, I wrote one that highlights the code blocks with starry-night and adds the language information (amongst other things).

It supports applying additional metadata on code blocks (e.g., highlighting lines, prompt indicators, captions, etc). There's no API to add your own metadata though.