feat: add language-* class to rendered code blocks (#787)

* 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>

* style: apply prettier formatting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mishig25

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}}
 	/>`;
 			}

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,8 @@
 			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>

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,8 @@
 				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 +49,8 @@
 				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}