feat(markdown): move highlighting to worker (#1741)

src/lib/components/CodeBlock.svelte

@@ -1,24 +1,19 @@
 <script lang="ts">
 	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
 	import DOMPurify from "isomorphic-dompurify";
-	import hljs from "highlight.js";
 
 	interface Props {
 		code?: string;
 		lang?: string;
 	}
 
-	let { code = "", lang = "" }: Props = $props();
-
-	let highlightedCode = $derived(hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value);
+	let { code = "" }: Props = $props();
 </script>
 
 <div class="group relative my-4 rounded-lg">
 	<pre
 		class="scrollbar-custom overflow-auto px-5 font-mono scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
-			><!-- eslint-disable svelte/no-at-html-tags -->{@html DOMPurify.sanitize(
-				highlightedCode
-			)}</code
+			><!-- eslint-disable svelte/no-at-html-tags -->{@html DOMPurify.sanitize(code)}</code
 		></pre>
 	<CopyToClipBoardBtn
 		classNames="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 dark:text-gray-700 text-gray-200"

src/lib/components/chat/MarkdownRenderer.svelte

@@ -62,6 +62,6 @@
 			{@html DOMPurify.sanitize(html)}
 		{/await}
 	{:else if token.type === "code"}
-		<CodeBlock lang={token.lang} code={token.code} />
+		<CodeBlock code={token.code} />
 	{/if}
 {/each}

src/lib/utils/marked.ts

@@ -3,6 +3,7 @@ import "katex/dist/contrib/mhchem.mjs";
 import { Marked } from "marked";
 import type { Tokens, TokenizerExtension, RendererExtension } from "marked";
 import type { WebSearchSource } from "$lib/types/WebSearch";
+import hljs from "highlight.js";
 
 interface katexBlockToken extends Tokens.Generic {
 	type: "katexBlock";
@@ -188,7 +189,7 @@ export async function processTokens(content: string, sources: WebSearchSource[])
 				return {
 					type: "code" as const,
 					lang: token.lang,
-					code: token.text,
+					code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
 				};
 			} else {
 				return {
@@ -207,7 +208,11 @@ export function processTokensSync(content: string, sources: WebSearchSource[]):
 	const tokens = marked.lexer(content);
 	return tokens.map((token) => {
 		if (token.type === "code") {
-			return { type: "code" as const, lang: token.lang, code: token.text };
+			return {
+				type: "code" as const,
+				lang: token.lang,
+				code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
+			};
 		}
 		return { type: "text" as const, html: marked.parse(token.raw) };
 	});