trying single code block highlight again. why is it blue???

Author: katrinafyi

astro.config.mjs

@@ -2,6 +2,7 @@ import starlight from "@astrojs/starlight";
 import { defineConfig } from "astro/config";
 import { generateCliOptionsIntegration } from "./src/fetchReadme";
 import smartypants from "remark-smartypants";
+import { pluginCodeMarkerAnchors } from "./src/CodeMarkerAnchorPlugin.mjs";
 
 // https://astro.build/config
 export default defineConfig({
@@ -17,6 +18,7 @@ export default defineConfig({
 		generateCliOptionsIntegration("src/content/docs/guides/_cli.md"),
 		starlight({
 			expressiveCode: {
+  			plugins: [pluginCodeMarkerAnchors()],
 				themes: ["catppuccin-frappe", "catppuccin-latte"],
 			},
 			title: "Docs",

src/CodeMarkerAnchorPlugin.mjs

@@ -0,0 +1,49 @@
+/**
+ * [Expressive code plugin] for transforming [markers][] beginning with `#`
+ * into anchor links. The marker text is replaced with only `#` and
+ * the marker becomes a hyperlink to the anchor itself.
+ *
+ * This allows creating links to certain named positions within a code block.
+ *
+ * [markers]: https://expressive-code.com/key-features/text-markers/
+ * [Expressive code plugin]: https://expressive-code.com/reference/plugin-hooks/
+ */
+export function pluginCodeMarkerAnchors() {
+  /** @type {import('astro-expressive-code').ExpressiveCodePlugin} */
+  const plugin = {
+    name: "CodeMarkerAnchorPlugin",
+    hooks: {
+      // first, markers beginning with `#` are identified. the anchor ID is
+      // stored, then the text is replaced with just `#`.
+      postprocessAnnotations: async (x) => {
+        for (const line of x.codeBlock.getLines()) {
+          for (const annot of line.getAnnotations()) {
+            if (annot.markerType !== "mark") continue;
+            if (annot.label?.startsWith("#")) {
+              // NOTE: this is kind of hacky, it's adding a new field into the
+              // TextMarkerAnnotation class.
+              annot.anchor = annot.label.replace("#", "");
+              annot.label = "#";
+            }
+          }
+        }
+      },
+
+      // secondly, rendered markers with recorded anchors are turned into
+      // hyperlinks with id attributes.
+      postprocessRenderedLine: async (x) => {
+        const annot = x.line.getAnnotations().find((x) => !!x.anchor);
+        if (!annot) return;
+
+        const lineAst = x.renderData.lineAst;
+
+        lineAst.tagName = "a";
+        lineAst.properties.id = annot.anchor;
+        lineAst.properties.href = `#${annot.anchor}`;
+        lineAst.properties.style = `text-decoration-line: none;${lineAst.properties.style ?? ""}`;
+      },
+    },
+  };
+
+  return plugin;
+}

src/fetchReadme.ts

@@ -53,38 +53,22 @@ function* generateMarkdown(lines: string[]) {
   const bodyRegex = /^          (.*)/;
   const defaultValuesRegex = /^\[(default|possible values|env): (.*)\]$/;
 
-  let match;
-  for (const line of lines) {
-    if (line.match(usageRegex)) {
-      yield '```';
-      yield line;
-      yield '```';
-
-    } else if (line.match(headingRegex)) {
-      yield "## " + escapeMarkdown(line.replace(/:$/, ''));
-
-    } else if (match = line.match(optionRegex)) {
-      const option = escapeMarkdown(match[0]).trim();
-      const longOption = line.replace(/-[^-],/, '');
-      yield `### ${option}`;
-      yield '';
-      yield '```bash';
-      yield `lychee ${longOption.trimStart()}`;
-      yield '```';
-
-    } else if (match = line.match(bodyRegex)) {
-      const line = match[1];
-      if (match = line.match(defaultValuesRegex)) {
-        yield `**${match[1]}**: ${match[2]}`;
-        yield '';
-      } else {
-        yield '    ' + line;
-      }
-
-    } else {
-      yield line;
+  const markers: {[l: string]: number} = {};
+  for (const [i, line] of lines.entries()) {
+    const match = line.match(optionRegex);
+    if (match) {
+      markers[`#${match[0].trim()}`] = i + 1;
     }
   }
+
+  for (const line of Object.keys(markers)) {
+    yield '### ' + line.replace('#', '');
+    yield '';
+  }
+
+  yield '```text ' + Object.entries(markers).map(([l, i]) => JSON.stringify({[l]: i})).join(' ')
+  yield* lines;
+  yield '```';
 }
 
 export async function generateCliOptionsMarkdown() {
@@ -94,10 +78,10 @@ export async function generateCliOptionsMarkdown() {
   const rawUsageText = extractHelpFromReadme(await readme.text());
   const usageText = [...generateMarkdown(splitLines(rawUsageText))].join("\n");
 
-  assert(usageText.match('\n## Options\n'), 'options heading missing, check headingRegex');
-  assert(usageText.match('\n### --dump\n'), '--dump heading missing, check optionRegex');
-  assert(usageText.match('\n### --root-dir\n'), '--root-dir heading missing, check optionRegex');
-  assert(usageText.match('\n    Inputs for link checking'), 'expected body text missing, check bodyRegex');
+  // assert(usageText.match('\n## Options\n'), 'options heading missing, check headingRegex');
+  // assert(usageText.match('\n### --dump\n'), '--dump heading missing, check optionRegex');
+  // assert(usageText.match('\n### --root-dir\n'), '--root-dir heading missing, check optionRegex');
+  // assert(usageText.match('\n    Inputs for link checking'), 'expected body text missing, check bodyRegex');
 
   return usageText;
 }