Add latex support with marked-katex-extension (#450)

* Add latex support with marked-katex-extension

* Add renderer

* Fix marked default option problem

* Fix linting error

* Fix lock error

package-lock.json

@@ -43,6 +43,7 @@
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte": "^2.27.3",
+				"marked-katex-extension": "^3.0.6",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
 				"prettier-plugin-tailwindcss": "^0.2.7",
@@ -1002,6 +1003,12 @@
 			"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
 			"dev": true
 		},
+		"node_modules/@types/katex": {
+			"version": "0.16.3",
+			"resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.3.tgz",
+			"integrity": "sha512-CeVMX9EhVUW8MWnei05eIRks4D5Wscw/W9Byz1s3PA+yJvcdvq9SaDjiUKvRvEgjpdTyJMjQA43ae4KTwsvOPg==",
+			"dev": true
+		},
 		"node_modules/@types/long": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
@@ -3328,6 +3335,31 @@
 			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
 			"dev": true
 		},
+		"node_modules/katex": {
+			"version": "0.16.8",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+			"integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+			"dev": true,
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"dependencies": {
+				"commander": "^8.3.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
+		"node_modules/katex/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"dev": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -3484,6 +3516,19 @@
 				"node": ">= 12"
 			}
 		},
+		"node_modules/marked-katex-extension": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-3.0.6.tgz",
+			"integrity": "sha512-X1XPjXVFcE0zo6oCcHuIOUrFCzUNMOPXqh05c18kNEB/htLSohrJTzOSWhDnNyVynoTiYrl8IhwZu6C0lTNFAQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/katex": "^0.16.2",
+				"katex": "^0.16.8"
+			},
+			"peerDependencies": {
+				"marked": ">=4 <10"
+			}
+		},
 		"node_modules/md5-hex": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.27.3",
+		"marked-katex-extension": "^3.0.6",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",

src/lib/components/chat/ChatMessage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { marked } from "marked";
+	import markedKatex from "marked-katex-extension";
 	import type { Message } from "$lib/types/Message";
 	import { afterUpdate, createEventDispatcher } from "svelte";
 	import { deepestChild } from "$lib/utils/deepestChild";
@@ -59,20 +60,31 @@
 	let pendingTimeout: ReturnType<typeof setTimeout>;
 
 	const renderer = new marked.Renderer();
-
 	// For code blocks with simple backticks
 	renderer.codespan = (code) => {
 		// Unsanitize double-sanitized code
 		return `<code>${code.replaceAll("&amp;", "&")}</code>`;
 	};
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		extensions: any;
+	};
 	const options: marked.MarkedOptions = {
-		...marked.getDefaults(),
+		...defaults,
 		gfm: true,
 		breaks: true,
 		renderer,
 	};
 
+	marked.use(
+		markedKatex({
+			throwOnError: false,
+			// output: "html",
+		})
+	);
+
 	$: tokens = marked.lexer(sanitizeMd(message.content));
 
 	afterUpdate(() => {
@@ -140,7 +152,7 @@
 						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
 					{:else}
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html marked(token.raw, options)}
+						{@html marked.parse(token.raw, options)}
 					{/if}
 				{/each}
 			</div>
@@ -150,7 +162,7 @@
 					<div class="text-gray-400">Sources:</div>
 					{#each webSearchSources as { link, title, hostname }}
 						<a
-							class="flex items-center gap-2 whitespace-nowrap rounded-lg border bg-white px-2 py-1.5 leading-none hover:border-gray-300  dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+							class="flex items-center gap-2 whitespace-nowrap rounded-lg border bg-white px-2 py-1.5 leading-none hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
 							href={link}
 							target="_blank"
 						>

src/routes/conversation/[id]/+page.svelte

@@ -270,6 +270,12 @@
 
 <svelte:head>
 	<title>{title}</title>
+	<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+		integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
+		crossorigin="anonymous"
+	/>
 </svelte:head>
 
 <ChatWindow