fix: improve code group style in RSS (#634)

Author: rksvc

.vitepress/config/rss.ts

@@ -1,7 +1,9 @@
 import { Author, Feed } from "feed";
+import container from "markdown-it-container";
+import type Token from "markdown-it/lib/token.mjs";
 import { mkdirSync, writeFileSync } from "node:fs";
 import path from "node:path";
-import { createContentLoader, defineConfig, type SiteConfig } from "vitepress";
+import { createContentLoader, createMarkdownRenderer, defineConfig, type SiteConfig } from "vitepress";
 import { TEAM_MEMBERS_MAP } from "../theme/constants/team";
 import { sharedConfig } from "./shared";
 
@@ -37,6 +39,39 @@ export const rssConfig = defineConfig({
       copyright: sharedConfig.themeConfig!.footer!.copyright!,
     });
 
+    const md = await createMarkdownRenderer(
+      config.srcDir,
+      config.markdown,
+      config.site.base,
+      config.logger,
+    );
+    // Wrap code groups with <table>s
+    // Reference: https://github.com/vuejs/vitepress/blob/179ee6/src/node/markdown/plugins/preWrapper.ts#L8
+    md.use(md => {
+      const fence = md.renderer.rules.fence!;
+      md.renderer.rules.fence = (...args) => {
+        const [tokens, idx] = args;
+        const token = tokens[idx];
+
+        const title = token.info.match(/\[(.*)\]/)?.[1];
+        // Code blocks in a code group have titles
+        return title == null
+          ? fence(...args)
+          : (
+            "<tr>"
+            + `<td>${title}</td>`
+            + `<td>${fence(...args)}</td>`
+            + "</tr>"
+          );
+      };
+    });
+    // Override https://github.com/vuejs/vitepress/blob/179ee6/src/node/markdown/plugins/containers.ts#L26
+    md.use(container, "code-group", {
+      render(tokens: Token[], idx: number) {
+        return tokens[idx].nesting === 1 ? "<table><tbody>" : "</tbody></table>\n";
+      },
+    });
+    // `createMarkdownRenderer` returns a cached global renderer, so the above modifications will be applied to the next rendering
     const posts = await createContentLoader("blog/*.md", {
       excerpt: true,
       render: true,

package.json

@@ -16,6 +16,8 @@
     "prepare": "husky"
   },
   "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^24.3.1",
     "@vueuse/core": "^14.0.0",
     "degit": "^2.8.4",
@@ -24,6 +26,7 @@
     "feed": "^5.1.0",
     "husky": "^9.1.7",
     "lint-staged": "16.2.6",
+    "markdown-it-container": "^4.0.0",
     "oxc-minify": "^0.97.0",
     "oxlint": "^1.14.0",
     "typescript": "~5.9.2",