[Starlight] MD in AnchorHeading & CompatibilityDates fix

Author: KianNH

src/components/AnchorHeading.astro

@@ -1,5 +1,6 @@
 ---
 import { z } from "astro:content";
+import { marked } from "marked";
 import { slug } from "github-slugger";
 
 type Props = z.infer<typeof props>;
@@ -15,7 +16,7 @@ const Heading = `h${depth}`;
 ---
 
 <div tabindex="-1" class=`heading-wrapper level-h${depth}`>
-	<Heading id={slug(title)}>{title}</Heading>
+	<Heading id={slug(title)} set:html={marked.parseInline(title)} />
 	<a class="anchor-link" href={`#${slug(title)}`}>
 		<span aria-hidden class="anchor-icon">
 			<svg width="16" height="16" viewBox="0 0 24 24">

src/components/CompatibilityDates.astro

@@ -21,40 +21,43 @@ if (experimental) {
 	flags.map(
 		async (entry) => {
 			const { Content } = await entry.render();
-			<>	
-				<AnchorHeading title={entry.data.name} depth={3} />
-				<table>
-					{entry.data.enable_date && (
-						<tr>
-							<td>
-								<strong>Default as of</strong>
-							</td>
-							<td>{entry.data.enable_date}</td>
-						</tr>
-					)}
-					{entry.data.enable_flag && (
-						<tr>
-							<td>
-								<strong>Flag to enable</strong>
-							</td>
-							<td>
-								<code>{entry.data.enable_flag}</code>
-							</td>
-						</tr>
-					)}
-					{entry.data.disable_flag && (
-						<tr>
-							<td>
-								<strong>Flag to disable</strong>
-							</td>
-							<td>
-								<code>{entry.data.disable_flag}</code>
-							</td>
-						</tr>
-					)}
-				</table>
-				<Content />
-			</>
+
+			return (
+				<>	
+					<AnchorHeading title={entry.data.name} depth={3} />
+					<table>
+						{entry.data.enable_date && (
+							<tr>
+								<td>
+									<strong>Default as of</strong>
+								</td>
+								<td>{entry.data.enable_date}</td>
+							</tr>
+						)}
+						{entry.data.enable_flag && (
+							<tr>
+								<td>
+									<strong>Flag to enable</strong>
+								</td>
+								<td>
+									<code>{entry.data.enable_flag}</code>
+								</td>
+							</tr>
+						)}
+						{entry.data.disable_flag && (
+							<tr>
+								<td>
+									<strong>Flag to disable</strong>
+								</td>
+								<td>
+									<code>{entry.data.disable_flag}</code>
+								</td>
+							</tr>
+						)}
+					</table>
+					<Content />
+				</>
+			)
 		},
 	)
 }