From d04bc2fe0583f02ff691466d091d6a399436b118 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Thu, 4 Dec 2025 20:29:13 +0000
Subject: [PATCH] feat: Add LaTeX math rendering support

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/Article.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index ef29a6d..514c406 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -3,10 +3,19 @@ import { useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, ToggleDot } from './utils.js';
+import Latex from 'react-latex-next';
+import 'katex/dist/katex.min.css';
 
 const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
 const DANGEROUS_TAGS = ['svg', 'math'];
 
+const latexDelimiters = [
+    { left: '$$', right: '$$', display: true },
+    { left: '\\[', right: '\\]', display: true },
+    { left: '$', right: '$', display: false },
+    { left: '\\(', right: '\\)', display: false }
+];
+
 function Article({ cache }) {
 	const { id } = useParams();
 
@@ -96,6 +105,11 @@ function Article({ cache }) {
 			}
 
 			if (v.nodeName === '#text') {
+				const text = v.data;
+				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$')) {
+					return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
+				}
+
 				// Only wrap top-level text nodes in <p>
 				if (keyPrefix === '' && v.data.trim() !== '') {
 					return <p key={key}>{v.data}</p>;