block level math

webapp/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"crypto-js": "^4.1.1",
+				"katex": "^0.16.0",
 				"marked": "^4.0.17",
 				"svelte-icons": "^2.1.0",
 				"svelte-markdown": "^0.2.2"
@@ -927,6 +928,14 @@
 				"color-support": "bin.js"
 			}
 		},
+		"node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2210,6 +2219,21 @@
 			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
 			"dev": true
 		},
+		"node_modules/katex": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.0.tgz",
+			"integrity": "sha512-wPRB4iUPysfH97wTgG5/tRLYxmKVq6Q4jRAWRVOUxXB1dsiv4cvcNjqabHkrOvJHM1Bpk3WrgmllSO1vIvP24w==",
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"dependencies": {
+				"commander": "^8.0.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -4708,6 +4732,11 @@
 			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
 			"dev": true
 		},
+		"commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+		},
 		"concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5598,6 +5627,14 @@
 			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
 			"dev": true
 		},
+		"katex": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.0.tgz",
+			"integrity": "sha512-wPRB4iUPysfH97wTgG5/tRLYxmKVq6Q4jRAWRVOUxXB1dsiv4cvcNjqabHkrOvJHM1Bpk3WrgmllSO1vIvP24w==",
+			"requires": {
+				"commander": "^8.0.0"
+			}
+		},
 		"kleur": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",

webapp/package.json

@@ -37,6 +37,7 @@
 	"type": "module",
 	"dependencies": {
 		"crypto-js": "^4.1.1",
+		"katex": "^0.16.0",
 		"marked": "^4.0.17",
 		"svelte-icons": "^2.1.0",
 		"svelte-markdown": "^0.2.2"

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -11,6 +11,7 @@
 	import InternalEmbed from '$lib/marked/renderers/InternalEmbed.svelte';
 	import Blockquote from '$lib/marked/renderers/Blockquote.svelte';
 	import MathInline from '$lib/marked/renderers/MathInline.svelte';
+	import MathBlock from '$lib/marked/renderers/MathBlock.svelte';
 
 	export let plaintext: string;
 
@@ -36,7 +37,8 @@ prose-blockquote:first:before:content-['']"
 			tag: Tag,
 			highlight: Highlight,
 			blockquote: Blockquote,
-			'math-inline': MathInline
+			'math-inline': MathInline,
+			'math-block': MathBlock
 		}}
 		source={plaintext}
 		{options}

webapp/src/lib/components/Math.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	// @ts-expect-error
+	import katex from 'katex';
+	export let math: string;
+	export let displayMode = false;
+
+	const options = {
+		displayMode: displayMode,
+		throwOnError: false
+	};
+
+	$: katexString = katex.renderToString(math, options);
+</script>
+
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
+		integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ"
+		crossorigin="anonymous"
+	/>
+</svelte:head>
+
+{@html katexString}

webapp/src/lib/marked/extensions.ts

@@ -83,8 +83,7 @@ const MathInline = {
 	},
 
 	tokenizer(src: string) {
-		const match = src.match(/^(\${1})((?:\\.|.)*)\1/);
+		const match = src.match(/^(\${1})((?:\\.|.)+)\1/);
-		console.log(src, match);
 		if (match) {
 			return {
 				type: 'math-inline',
@@ -96,12 +95,35 @@ const MathInline = {
 	}
 };
 
+const MathBlock = {
+	name: 'math-block',
+	level: 'inline',
+	start(src: string) {
+		return src.indexOf('$$');
+	},
+
+	tokenizer(src: string) {
+		// console.log(src);
+		const match = src.match(/^(\${2})((?:\\.|.|\n)+)\1/m);
+		if (match) {
+			console.log(src, match);
+			return {
+				type: 'math-block',
+				raw: match[0],
+				text: match[2].trim()
+			};
+		}
+		return false;
+	}
+};
+
 export default [
 	InternalLinkExtension,
 	InternalEmbedExtension,
 	TagExtension,
 	HighlightExtension,
-	MathInline
+	MathInline,
+	MathBlock
 ];
 
 // ^\#([\w\/]+)\W*

webapp/src/lib/marked/renderers/MathBlock.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Katex from '$lib/components/Math.svelte';
+
+	export let text: string;
+</script>
+
+<Katex math={text} displayMode />

webapp/src/lib/marked/renderers/MathInline.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import Katex from '$lib/components/Math.svelte';
+
 	export let text: string;
 </script>
 
-<span>{text}</span>
+<Katex math={text} />