From 9fccea6e3c933f47a7f2bbe06f77cc76400f6c88 Mon Sep 17 00:00:00 2001 From: Maxime Cannoodt Date: Sat, 25 Jun 2022 10:39:18 +0200 Subject: [PATCH] block level math --- server/prisma/dev.db | Bin 143360 -> 143360 bytes webapp/package-lock.json | 37 ++++++++++++++++++ webapp/package.json | 1 + .../lib/components/MarkdownRenderer.svelte | 4 +- webapp/src/lib/components/Math.svelte | 24 ++++++++++++ webapp/src/lib/marked/extensions.ts | 28 +++++++++++-- .../src/lib/marked/renderers/MathBlock.svelte | 7 ++++ .../lib/marked/renderers/MathInline.svelte | 4 +- 8 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 webapp/src/lib/components/Math.svelte create mode 100644 webapp/src/lib/marked/renderers/MathBlock.svelte diff --git a/server/prisma/dev.db b/server/prisma/dev.db index 0cc4d75c228c6b205a14a8e1cabff6a2f6d42e3b..9ae4460a8260b565bb8ee269629a5e363db4aeb9 100644 GIT binary patch delta 755 zcmZ|MyKd7^00v+}TQw+Z1v9WAQ0pP~v3-1wM5&ysT_<(Y*l`-E61LBAoW#!6xiX{| zvCstsQdMSNpknAl@B)mT8F&Rqkx&;{|6lrt??1kYAK%2^KaRlzN+^Xtp=So_oFTKwYPCX@J)h&}iozqmSi8(*Bh+FsvXJKH(g`0sq|)$O>&9{P{a>rU0a+~ZV*mgE delta 67 zcmZp8z|ru4V}dlJ$wV1vMw5*ROX`_bxo1vhZ}8qMDB#XLIkuald13eVh24zFQ@EJ9 X85#JrxnFTJ0wq6lZD-VG`p*IY0x%VN diff --git a/webapp/package-lock.json b/webapp/package-lock.json index afd23de..4d06726 100644 --- a/webapp/package-lock.json +++ b/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", diff --git a/webapp/package.json b/webapp/package.json index d959866..9e44e02 100644 --- a/webapp/package.json +++ b/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" diff --git a/webapp/src/lib/components/MarkdownRenderer.svelte b/webapp/src/lib/components/MarkdownRenderer.svelte index 56fb39e..6378693 100644 --- a/webapp/src/lib/components/MarkdownRenderer.svelte +++ b/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} diff --git a/webapp/src/lib/components/Math.svelte b/webapp/src/lib/components/Math.svelte new file mode 100644 index 0000000..b2c7189 --- /dev/null +++ b/webapp/src/lib/components/Math.svelte @@ -0,0 +1,24 @@ + + + + + + +{@html katexString} diff --git a/webapp/src/lib/marked/extensions.ts b/webapp/src/lib/marked/extensions.ts index aea20f6..9430090 100644 --- a/webapp/src/lib/marked/extensions.ts +++ b/webapp/src/lib/marked/extensions.ts @@ -83,8 +83,7 @@ const MathInline = { }, tokenizer(src: string) { - const match = src.match(/^(\${1})((?:\\.|.)*)\1/); - console.log(src, match); + const match = src.match(/^(\${1})((?:\\.|.)+)\1/); 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* diff --git a/webapp/src/lib/marked/renderers/MathBlock.svelte b/webapp/src/lib/marked/renderers/MathBlock.svelte new file mode 100644 index 0000000..72478c2 --- /dev/null +++ b/webapp/src/lib/marked/renderers/MathBlock.svelte @@ -0,0 +1,7 @@ + + + diff --git a/webapp/src/lib/marked/renderers/MathInline.svelte b/webapp/src/lib/marked/renderers/MathInline.svelte index 52dd2e6..b5f7368 100644 --- a/webapp/src/lib/marked/renderers/MathInline.svelte +++ b/webapp/src/lib/marked/renderers/MathInline.svelte @@ -1,5 +1,7 @@ -{text} +