Highlight the code blocks whose language is not lowercase

GitHub ignores the case of the language of a fenced code block, whereas
the language ids of Shiki are case-sensitive. The `typeScript` blocks of
the upgrade guide to v0.54.0 were rendered as plain text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

Author: Nexucis

src/content/markdown/render.server.test.ts

@@ -77,6 +77,13 @@ describe('renderMarkdown', () => {
     expect(result.hasMermaid).toBe(true);
   });
 
+  it('ignores the case of the language of the code blocks, like GitHub', async () => {
+    const mixedCase = await renderMarkdown('```typeScript\nconst a = 1;\n```\n');
+    const lowerCase = await renderMarkdown('```typescript\nconst a = 1;\n```\n');
+    expect(mixedCase.hast).toEqual(lowerCase.hast);
+    expect(findElements(mixedCase.hast, 'code')[0]?.properties.class).toEqual(['language-typescript']);
+  });
+
   it('rewrites the URLs with the resolver', async () => {
     const result = await renderMarkdown('[page](./other.md#anchor) ![image](img.png) [external](https://example.com)', {
       resolveUrl: (url, kind) => (url.startsWith('http') ? undefined : `/resolved/${kind}/${url}`),

src/content/markdown/render.server.ts

@@ -135,6 +135,27 @@ export function markdownTitle(markdown: string): string | undefined {
   return undefined;
 }
 
+/**
+ * rehypeLowercaseLanguages lowercases the `language-*` class of the code blocks. GitHub ignores the case of the
+ * language of a fenced code block (`typeScript`), whereas the language ids of Shiki are case-sensitive.
+ */
+function rehypeLowercaseLanguages() {
+  return (tree: HastRoot) => {
+    visit(tree, 'element', (node: Element, _index, parent) => {
+      if (node.tagName !== 'code' || parent?.type !== 'element' || parent.tagName !== 'pre') {
+        return;
+      }
+      const classes = node.properties.className;
+      if (!Array.isArray(classes)) {
+        return;
+      }
+      node.properties.className = classes.map((name) =>
+        typeof name === 'string' && name.startsWith('language-') ? name.toLowerCase() : name,
+      );
+    });
+  };
+}
+
 /**
  * rehypeMermaid replaces the mermaid code blocks with a `pre.mermaid` element, rendered on the client side.
  */
@@ -234,6 +255,7 @@ export async function renderMarkdown(markdown: string, options: RenderOptions =
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
     .use(rehypeHeadings, headings)
+    .use(rehypeLowercaseLanguages)
     .use(rehypeMermaid, mermaid)
     .use(rehypeShikiFromHighlighter, highlighter, {
       themes: shikiThemes,