webui: LaTeX-line-break in display formula

Author: srogmann

tools/server/webui/src/lib/constants/latex-protection.ts

@@ -25,6 +25,9 @@ export const CODE_BLOCK_REGEXP = /(```[\s\S]*?```|`[^`\n]+`)/g;
 export const LATEX_MATH_AND_CODE_PATTERN =
 	/(```[\S\s]*?```|`.*?`)|(?<!\\)\\\[([\S\s]*?[^\\])\\]|(?<!\\)\\\((.*?)\\\)/g;
 
+/** Regex to capture the content of a $$...\\\\...$$ block (display-formula with line-break) */
+export const LATEX_LINEBREAK_REGEXP = /\$\$([\s\S]*?\\\\[\s\S]*?)\$\$/;
+
 /** map from mchem-regexp to replacement */
 export const MHCHEM_PATTERN_MAP: readonly [RegExp, string][] = [
 	[/(\s)\$\\ce{/g, '$1$\\\\ce{'],

tools/server/webui/src/lib/utils/latex-protection.test.ts

@@ -272,6 +272,23 @@ $$`
 		// $5 becomes \$5 only *after* real math is masked — but here it's correct because the masking logic avoids treating $5 as math.
 	});
 
+	test('display with LaTeX-line-breaks', () => {
+		const input = String.raw`- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$`;
+		const output = preprocessLaTeX(input);
+		// If the formula contains '\\' the $$-delimiters should be in their own line.
+		expect(output).toBe(`- Algebraic topology, Homotopy Groups of $\\mathbb{S}^3$:
+$$\n\\pi_n(\\mathbb{S}^3) = \\begin{cases}
+\\mathbb{Z} & n = 3 \\\\
+0 & n > 3, n \\neq 4 \\\\
+\\mathbb{Z}_2 & n = 4 \\\\
+\\end{cases}\n$$`);
+	});
+
 	test('handles mhchem notation safely if present', () => {
 		const input = 'Chemical reaction: \\( \\ce{H2O} \\) and $\\ce{CO2}$';
 		const output = preprocessLaTeX(input);

tools/server/webui/src/lib/utils/latex-protection.ts

@@ -1,6 +1,7 @@
 import {
 	CODE_BLOCK_REGEXP,
 	LATEX_MATH_AND_CODE_PATTERN,
+	LATEX_LINEBREAK_REGEXP,
 	MHCHEM_PATTERN_MAP
 } from '$lib/constants/latex-protection';
 
@@ -198,7 +199,17 @@ export function preprocessLaTeX(content: string): string {
 
 	// Step 4: Restore protected LaTeX expressions (they are valid)
 	content = content.replace(/<<LATEX_(\d+)>>/g, (_, index) => {
-		return latexExpressions[parseInt(index)];
+		let expr = latexExpressions[parseInt(index)];
+		const match = expr.match(LATEX_LINEBREAK_REGEXP);
+		if (match) {
+			// Katex: The $$-delimiters should be in their own line
+			// if there are \\-line-breaks.
+			const formula = match[1];
+			const prefix = formula.startsWith('\n') ? '' : '\n';
+			const suffix = formula.endsWith('\n') ? '' : '\n';
+			expr = '$$' + prefix + formula + suffix + '$$';
+		}
+		return expr;
 	});
 
 	// Step 5: Restore code blocks

tools/server/webui/src/stories/fixtures/math-formulas.ts

@@ -174,6 +174,12 @@ x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
 - Algebra: \[
 x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
 \]
+- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$
 - Spacer preceded by backslash:
 \[
 \boxed{