From c7f8e0a973064e9f8c2944cc5b4389107af05280 Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Tue, 5 May 2026 13:15:06 +0200
Subject: [PATCH 1/2] feat: add language-* class to rendered code blocks

The fence language identifier was parsed by mdsvex and used only to
pick the highlighter, then dropped before rendering. Forward it to
CodeBlock / CodeBlockFw and emit it as `class="language-<lang>"` on
the `<pre>`, so downstream consumers can target code blocks by
language in CSS or external tooling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 kit/preprocessors/mdsvex/index.js | 5 ++++-
 kit/src/lib/CodeBlock.svelte      | 3 ++-
 kit/src/lib/CodeBlockFw.svelte    | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/kit/preprocessors/mdsvex/index.js b/kit/preprocessors/mdsvex/index.js
index 3e3e0a777..1177a9551 100644
--- a/kit/preprocessors/mdsvex/index.js
+++ b/kit/preprocessors/mdsvex/index.js
@@ -338,6 +338,7 @@ const _mdsvexPreprocess = mdsvex({
 			const base64 = (val) => btoa(encodeURIComponent(val));
 			const escape = (code) =>
 				code.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/}/g, "\\}").replace(/\$/g, "\\$");
+			const safeLang = lang && /^[\w-]+$/.test(lang) ? lang : "";
 			const REGEX_FRAMEWORKS_SPLIT = /\s*===(PT-TF|STRINGAPI-READINSTRUCTION)-SPLIT===\s*/gm;
 
 			// Handle mermaid diagrams
@@ -380,6 +381,7 @@ const _mdsvexPreprocess = mdsvex({
 			code: \`${base64(codeGroup2)}\`,
 			highlighted: \`${escape(highlightedTf)}\`
 		}}
+		lang="${safeLang}"
 		wrap={${wrapCodeBlocks}}
 	/>`;
 			} else {
@@ -394,9 +396,10 @@ const _mdsvexPreprocess = mdsvex({
 						.join("\n");
 				}
 				return `
-	<CodeBlock 
+	<CodeBlock
 		code={\`${base64(code)}\`}
 		highlighted={\`${escape(highlighted)}\`}
+		lang="${safeLang}"
 		wrap={${wrapCodeBlocks}}
 	/>`;
 			}
diff --git a/kit/src/lib/CodeBlock.svelte b/kit/src/lib/CodeBlock.svelte
index 2d6e7d2c1..c2d2c5f2e 100644
--- a/kit/src/lib/CodeBlock.svelte
+++ b/kit/src/lib/CodeBlock.svelte
@@ -3,6 +3,7 @@
 	let hideCopyButton = true;
 	export let code = "";
 	export let highlighted = "";
+	export let lang = "";
 	export let wrap = false;
 	export let classNames = "";
 
@@ -28,5 +29,5 @@
 			value={code}
 		/>
 	</div>
-	<pre class={wrap ? "whitespace-pre-wrap" : ""}>{@html highlighted}</pre>
+	<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}">{@html highlighted}</pre>
 </div>
diff --git a/kit/src/lib/CodeBlockFw.svelte b/kit/src/lib/CodeBlockFw.svelte
index 7c4896fbd..021358186 100644
--- a/kit/src/lib/CodeBlockFw.svelte
+++ b/kit/src/lib/CodeBlockFw.svelte
@@ -5,6 +5,7 @@
 
 	export let group1: { id: string; code: string; highlighted: string };
 	export let group2: { id: string; code: string; highlighted: string };
+	export let lang = "";
 	export let wrap = false;
 
 	const ids = [group1.id, group2.id];
@@ -36,7 +37,7 @@
 				value={group1.code}
 			/>
 		</div>
-		<pre class={wrap ? "whitespace-pre-wrap" : ""}><FrameworkSwitch
+		<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
 				{ids}
 			/>{@html group1.highlighted}</pre>
 	{:else}
@@ -47,7 +48,7 @@
 				value={group2.code}
 			/>
 		</div>
-		<pre class={wrap ? "whitespace-pre-wrap" : ""}><FrameworkSwitch
+		<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
 				{ids}
 			/>{@html group2.highlighted}</pre>
 	{/if}

From 999b444ea041ba319357a44f234a1881e0680642 Mon Sep 17 00:00:00 2001
From: Mishig Davaadorj <dmishig@gmail.com>
Date: Tue, 5 May 2026 13:16:10 +0200
Subject: [PATCH 2/2] style: apply prettier formatting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 kit/src/lib/CodeBlock.svelte   | 5 ++++-
 kit/src/lib/CodeBlockFw.svelte | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/kit/src/lib/CodeBlock.svelte b/kit/src/lib/CodeBlock.svelte
index c2d2c5f2e..ac9208422 100644
--- a/kit/src/lib/CodeBlock.svelte
+++ b/kit/src/lib/CodeBlock.svelte
@@ -29,5 +29,8 @@
 			value={code}
 		/>
 	</div>
-	<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}">{@html highlighted}</pre>
+	<pre
+		class="{lang ? `language-${lang}` : ''} {wrap
+			? 'whitespace-pre-wrap'
+			: ''}">{@html highlighted}</pre>
 </div>
diff --git a/kit/src/lib/CodeBlockFw.svelte b/kit/src/lib/CodeBlockFw.svelte
index 021358186..16fee6609 100644
--- a/kit/src/lib/CodeBlockFw.svelte
+++ b/kit/src/lib/CodeBlockFw.svelte
@@ -37,7 +37,8 @@
 				value={group1.code}
 			/>
 		</div>
-		<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
+		<pre
+			class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
 				{ids}
 			/>{@html group1.highlighted}</pre>
 	{:else}
@@ -48,7 +49,8 @@
 				value={group2.code}
 			/>
 		</div>
-		<pre class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
+		<pre
+			class="{lang ? `language-${lang}` : ''} {wrap ? 'whitespace-pre-wrap' : ''}"><FrameworkSwitch
 				{ids}
 			/>{@html group2.highlighted}</pre>
 	{/if}