feat: add support for math notation using katex (#280)

Closes #263

Author: fmaclen

README.md

@@ -9,6 +9,7 @@ A minimal web-UI for talking to [Ollama](https://github.com/jmorganca/ollama/) s
 - Large prompt fields
 - Support for reasoning models
 - Markdown rendering with syntax highlighting
+- KaTeX math notation
 - Code editor features
 - Customizable system prompts & advanced Ollama parameters
 - Copy code snippets, messages or entire sessions

package-lock.json

@@ -43,8 +43,10 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.45.1",
 		"highlight.js": "^11.9.0",
+		"katex": "^0.16.21",
 		"lucide-svelte": "^0.372.0",
 		"markdown-it": "^14.1.0",
+		"markdown-it-texmath": "^1.0.0",
 		"ollama": "^0.5.9",
 		"openai": "^4.66.1",
 		"postcss": "^8.4.32",

package.json

@@ -1,15 +1,43 @@
 <script lang="ts">
 	import hljs from 'highlight.js';
+	import katex from 'katex';
+	import texmath from 'markdown-it-texmath';
 	import MarkdownIt from 'markdown-it/lib/index.mjs';
 	import { mount, onMount } from 'svelte';
 
 	import 'highlight.js/styles/github.min.css';
+	import 'katex/dist/katex.min.css';
 
 	import ButtonCopy from './ButtonCopy.svelte';
 
 	export let markdown: string;
 	const CODE_SNIPPET_ID = 'code-snippet';
 
+	function normalizeMarkdown(content: string) {
+		// Replace multiple newlines with double newlines
+		content = content.replace(/\n{2,}/g, '\n\n');
+
+		// First, normalize display math blocks
+		content = content.replace(/\n\\\[/g, '\n\n\\[');
+		content = content.replace(/\\]\n/g, '\\]\n\n');
+
+		// Split on all math delimiters: \[...\], \(...\), and $...$
+		// Using [\s\S] instead of . to match across lines
+		const parts = content.split(/(\$[^$]+\$|\\[([^)]+\\]|\\[\s\S]+?\\])/g);
+		content = parts
+			.map((part) => {
+				// If this part is any kind of math block, leave it unchanged
+				if (part.startsWith('$') || part.startsWith('\\[') || part.startsWith('\\(')) {
+					return part;
+				}
+				// Otherwise, wrap any \boxed commands in inline math
+				return part.replace(/\\boxed\{((?:[^{}]|\{[^{}]*\})*)\}/g, '\\(\\boxed{$1}\\)');
+			})
+			.join('');
+
+		return content;
+	}
+
 	function renderCodeSnippet(code: string) {
 		return `<pre id="${CODE_SNIPPET_ID}"><code class="hljs">${code}</code></pre>`;
 	}
@@ -30,6 +58,12 @@
 		}
 	});
 
+	// Math notation parsing with Katex, with multiple delimiters
+	md.use(texmath, {
+		engine: katex,
+		delimiters: ['dollars', 'brackets', 'doxygen', 'gitlab', 'julia', 'kramdown', 'beg_end']
+	});
+
 	onMount(() => {
 		const preElements = document.querySelectorAll(`pre#${CODE_SNIPPET_ID}`);
 
@@ -50,7 +84,8 @@
 		getting formatted on auto-formatting.
 	-->
 	{#if markdown}
-		{@html md.render(markdown)} <!-- eslint-disable-line svelte/no-at-html-tags -->
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html md.render(normalizeMarkdown(markdown))}
 	{/if}
 </div>
 

src/lib/components/Markdown.svelte

@@ -1,17 +1,17 @@
-`2025-03-23`
+`2025-03-24`
 
 ### Message of the day
 
 # Welcome to Hollama: a simple web interface for [Ollama](https://ollama.ai)
 
 #### What's new?
 
+- **KaTeX math notation** is now supported in model responses.
 - **Reasoning responses** (i.e. [`deepseek-r1`](https://ollama.com/library/deepseek-r1)) are now displayed in a dedicated UI component.
-- **Multiple-server support** allows you to connect to one or more Ollama (and/or OpenAI) servers at the same time.
-- **Bonjour le monde!** UI is now available in French.
 
 #### Previously, in Hollama
 
+- **Multiple-server support** allows you to connect to one or more Ollama (and/or OpenAI) servers at the same time.
 - **Models list can be filtered** by keyword for each server.
 - **Servers can be labeled** to help you identify them in the models list.
 - **Hallo Welt!** UI is now available in German.

src/routes/motd/motd.md

@@ -0,0 +1 @@
+declare module 'markdown-it-texmath';

src/types/markdown-it-texmath.d.ts

@@ -607,4 +607,50 @@ test.describe('Session interaction', () => {
 			'Here is how you can test your code effectively:\n\n1. Write unit tests\n2. Use integration tests\n3. Implement end-to-end testing'
 		);
 	});
+
+	test('renders math notation correctly using KaTeX', async ({ page }) => {
+		// Mock a session with LaTeX math content
+		await page.evaluate(() =>
+			window.localStorage.setItem(
+				'hollama-sessions',
+				JSON.stringify([
+					{
+						id: 'math123',
+						model: 'llama3',
+						messages: [
+							{
+								role: 'user',
+								content:
+									'What is the formula for Pythagoras theorem in math notation using latex/katex\n'
+							},
+							{
+								role: 'assistant',
+								content:
+									"The formula for Pythagoras' theorem, written in LaTeX (and rendered by KaTeX), is:\n\n\\[\\boxed{a^2 + b^2 = c^2}\\]\n\nwhere:\n- \\(a\\) and \\(b\\) are the lengths of the legs of a right triangle,\n- \\(c\\) is the length of the hypotenuse.",
+								reasoning: ''
+							}
+						],
+						context: [],
+						updatedAt: new Date().toISOString()
+					}
+				])
+			)
+		);
+
+		// Navigate to the session with math content
+		await page.goto('/sessions/math123');
+
+		// Wait for KaTeX to render
+		await page.waitForSelector('.katex');
+
+		// Check that math notation is rendered correctly
+		const eqnElements = await page.locator('eqn').count();
+		const eqElements = await page.locator('eq').count();
+		const katexSpans = await page.locator('span.katex').count();
+
+		// Assert that we have 3 instances of each
+		expect(eqnElements).toBe(1);
+		expect(eqElements).toBe(3);
+		expect(katexSpans).toBe(4);
+	});
 });