diff --git a/client/package.json b/client/package.json
index 2ccea43f22ce..58cbe2381796 100644
--- a/client/package.json
+++ b/client/package.json
@@ -80,6 +80,7 @@
"jquery-mousewheel": "^3.1.13",
"jquery-ui": "^1.13.2",
"jspdf": "^2.5.1",
+ "katex": "^0.16.22",
"linkify-html": "^4.1.1",
"linkifyjs": "^4.1.1",
"lodash.isequal": "^4.5.0",
diff --git a/client/src/components/Markdown/Editor/templates.yml b/client/src/components/Markdown/Editor/templates.yml
index 73f0ebc315bb..2ac1a0ebfae1 100644
--- a/client/src/components/Markdown/Editor/templates.yml
+++ b/client/src/components/Markdown/Editor/templates.yml
@@ -27,6 +27,16 @@ Markdown:
- First item
- Second item
- Third item
+ - title: "Equation Inline"
+ description: "Mathematics using KaTeX"
+ cell:
+ name: "markdown"
+ content: $c = \sqrt{a^2 + b^2}$
+ - title: "Equation Block"
+ description: "Mathematics using KaTeX"
+ cell:
+ name: "markdown"
+ content: $$c = \sqrt{a^2 + b^2}$$
Galaxy:
- title: "Collection"
diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
index ba7910a0a260..d3d51e3411ac 100644
--- a/client/src/components/Markdown/Sections/MarkdownDefault.vue
+++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue
@@ -4,12 +4,16 @@ import MarkdownIt from "markdown-it";
import markdownItRegexp from "markdown-it-regexp";
import { computed } from "vue";
+//@ts-ignore
+import markdownItKatex from "./Plugins/markdown-it-katex";
+
const mdNewline = markdownItRegexp(/
/, () => {
return "
";
});
const md = MarkdownIt();
md.use(mdNewline);
+md.use(markdownItKatex, { throwOnError: false });
const props = defineProps<{
content: string;
diff --git a/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js b/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js
new file mode 100644
index 000000000000..bb9b3a754e26
--- /dev/null
+++ b/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js
@@ -0,0 +1,226 @@
+/*
+Like markdown-it-simplemath, this is a stripped down, simplified version of:
+https://github.com/runarberg/markdown-it-math
+
+It differs in that it takes (a subset of) LaTeX as input and relies on KaTeX
+for rendering output.
+*/
+
+import "katex/dist/katex.min.css";
+
+import katex from "katex";
+
+// Test if potential opening or closing delimieter
+// Assumes that there is a "$" at state.src[pos]
+function isValidDelim(state, pos) {
+ const max = state.posMax;
+ const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1;
+ const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1;
+
+ let can_close = true;
+ let can_open = true;
+
+ // Check non-whitespace conditions for opening and closing, and
+ // check that closing delimeter isn't followed by a number
+ if (
+ prevChar === 0x20 /* " " */ ||
+ prevChar === 0x09 /* \t */ ||
+ (nextChar >= 0x30 /* "0" */ && nextChar <= 0x39) /* "9" */
+ ) {
+ can_close = false;
+ }
+ if (nextChar === 0x20 /* " " */ || nextChar === 0x09 /* \t */) {
+ can_open = false;
+ }
+
+ return {
+ can_open: can_open,
+ can_close: can_close,
+ };
+}
+
+function math_inline(state, silent) {
+ let match;
+ let res;
+ let pos;
+ let esc_count;
+
+ if (state.src[state.pos] !== "$") {
+ return false;
+ }
+
+ res = isValidDelim(state, state.pos);
+ if (!res.can_open) {
+ if (!silent) {
+ state.pending += "$";
+ }
+ state.pos += 1;
+ return true;
+ }
+
+ // First check for and bypass all properly escaped delimieters
+ // This loop will assume that the first leading backtick can not
+ // be the first character in state.src, which is known since
+ // we have found an opening delimieter already.
+ const start = state.pos + 1;
+ match = start;
+ while ((match = state.src.indexOf("$", match)) !== -1) {
+ // Found potential $, look for escapes, pos will point to
+ // first non escape when complete
+ pos = match - 1;
+ while (state.src[pos] === "\\") {
+ pos -= 1;
+ }
+
+ // Even number of escapes, potential closing delimiter found
+ if ((match - pos) % 2 == 1) {
+ break;
+ }
+ match += 1;
+ }
+
+ // No closing delimter found. Consume $ and continue.
+ if (match === -1) {
+ if (!silent) {
+ state.pending += "$";
+ }
+ state.pos = start;
+ return true;
+ }
+
+ // Check if we have empty content, ie: $$. Do not parse.
+ if (match - start === 0) {
+ if (!silent) {
+ state.pending += "$$";
+ }
+ state.pos = start + 1;
+ return true;
+ }
+
+ // Check for valid closing delimiter
+ res = isValidDelim(state, match);
+ if (!res.can_close) {
+ if (!silent) {
+ state.pending += "$";
+ }
+ state.pos = start;
+ return true;
+ }
+
+ if (!silent) {
+ const token = state.push("math_inline", "math", 0);
+ token.markup = "$";
+ token.content = state.src.slice(start, match);
+ }
+
+ state.pos = match + 1;
+ return true;
+}
+
+function math_block(state, start, end, silent) {
+ let firstLine;
+ let lastLine;
+ let next;
+ let lastPos;
+ let found = false;
+ let pos = state.bMarks[start] + state.tShift[start];
+ let max = state.eMarks[start];
+
+ if (pos + 2 > max) {
+ return false;
+ }
+ if (state.src.slice(pos, pos + 2) !== "$$") {
+ return false;
+ }
+
+ pos += 2;
+ firstLine = state.src.slice(pos, max);
+
+ if (silent) {
+ return true;
+ }
+ if (firstLine.trim().slice(-2) === "$$") {
+ // Single line expression
+ firstLine = firstLine.trim().slice(0, -2);
+ found = true;
+ }
+
+ for (next = start; !found; ) {
+ next++;
+
+ if (next >= end) {
+ break;
+ }
+
+ pos = state.bMarks[next] + state.tShift[next];
+ max = state.eMarks[next];
+
+ if (pos < max && state.tShift[next] < state.blkIndent) {
+ // non-empty line with negative indent should stop the list:
+ break;
+ }
+
+ if (state.src.slice(pos, max).trim().slice(-2) === "$$") {
+ lastPos = state.src.slice(0, max).lastIndexOf("$$");
+ lastLine = state.src.slice(pos, lastPos);
+ found = true;
+ }
+ }
+
+ state.line = next + 1;
+
+ const token = state.push("math_block", "math", 0);
+ token.block = true;
+ token.content =
+ (firstLine && firstLine.trim() ? firstLine + "\n" : "") +
+ state.getLines(start + 1, next, state.tShift[start], true) +
+ (lastLine && lastLine.trim() ? lastLine : "");
+ token.map = [start, state.line];
+ token.markup = "$$";
+ return true;
+}
+
+export default function (md, options) {
+ // Default options
+ options = options || {};
+
+ // set KaTeX as the renderer for markdown-it-simplemath
+ const katexInline = function (latex) {
+ options.displayMode = false;
+ try {
+ return katex.renderToString(latex, options);
+ } catch (error) {
+ if (options.throwOnError) {
+ console.log(error);
+ }
+ return latex;
+ }
+ };
+
+ const inlineRenderer = function (tokens, idx) {
+ return katexInline(tokens[idx].content);
+ };
+
+ const katexBlock = function (latex) {
+ options.displayMode = true;
+ try {
+ return "" + katex.renderToString(latex, options) + "
";
+ } catch (error) {
+ if (options.throwOnError) {
+ console.log(error);
+ }
+ return latex;
+ }
+ };
+
+ const blockRenderer = function (tokens, idx) {
+ return katexBlock(tokens[idx].content) + "\n";
+ };
+
+ md.inline.ruler.after("escape", "math_inline", math_inline);
+ md.block.ruler.after("blockquote", "math_block", math_block, {
+ alt: ["paragraph", "reference", "blockquote", "list"],
+ });
+ md.renderer.rules.math_inline = inlineRenderer;
+ md.renderer.rules.math_block = blockRenderer;
+}
diff --git a/client/src/components/PageDisplay/pageTemplate.yml b/client/src/components/PageDisplay/pageTemplate.yml
index 85410a8ba5be..ba3ac0c7aa20 100644
--- a/client/src/components/PageDisplay/pageTemplate.yml
+++ b/client/src/components/PageDisplay/pageTemplate.yml
@@ -1,4 +1,4 @@
content: |
#### Your Page Title
- Welcome to Galaxy Pages — a *Markdown* space where you can add text, Galaxy components like Tables, Datasets, and Visualizations to create rich, Interactive Pages.
\ No newline at end of file
+ Welcome to Galaxy Pages — a *Markdown* space where you can add text, mathematical equations, Galaxy components like Tables, Datasets, and Visualizations to create rich, Interactive Pages.
\ No newline at end of file
diff --git a/client/yarn.lock b/client/yarn.lock
index c91db9b66b5d..b8946175d439 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4463,6 +4463,11 @@ commander@^12.0.0, commander@^12.1.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==
+commander@^8.3.0:
+ version "8.3.0"
+ resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+ integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
compressible@~2.0.16:
version "2.0.18"
resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz"
@@ -8065,6 +8070,13 @@ karma-safari-launcher@^1.0.0:
resolved "https://registry.yarnpkg.com/karma-safari-launcher/-/karma-safari-launcher-1.0.0.tgz#96982a2cc47d066aae71c553babb28319115a2ce"
integrity sha512-qmypLWd6F2qrDJfAETvXDfxHvKDk+nyIjpH9xIeI3/hENr0U3nuqkxaftq73PfXZ4aOuOChA6SnLW4m4AxfRjQ==
+katex@^0.16.22:
+ version "0.16.22"
+ resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.22.tgz#d2b3d66464b1e6d69e6463b28a86ced5a02c5ccd"
+ integrity sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==
+ dependencies:
+ commander "^8.3.0"
+
kind-of@^3.0.2:
version "3.2.2"
resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"