From 95de63bd981033c07a82e038cde6fd44e18d50ff Mon Sep 17 00:00:00 2001
From: LaurensBartelds <laurensbartelds@protonmail.com>
Date: Tue, 21 Apr 2026 21:29:26 +0200
Subject: [PATCH] feat: add LaTeX rendering utilities and Tex component

---
 frontend/src/components/Tex.tsx | 14 +++++++++++
 frontend/src/utils/latex.ts     | 42 +++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 frontend/src/components/Tex.tsx
 create mode 100644 frontend/src/utils/latex.ts

diff --git a/frontend/src/components/Tex.tsx b/frontend/src/components/Tex.tsx
new file mode 100644
index 0000000..736f71d
--- /dev/null
+++ b/frontend/src/components/Tex.tsx
@@ -0,0 +1,14 @@
+import { renderLatex } from '../utils/latex'
+
+interface TexProps {
+  children?: string | null
+  tag?: keyof JSX.IntrinsicElements
+  className?: string
+  style?: React.CSSProperties
+}
+
+// Safe: renderLatex only produces KaTeX-controlled HTML + HTML-escaped plain text.
+export default function Tex({ children, tag: Tag = 'span', className, style }: TexProps) {
+  const html = String(children ?? '').split('\n').map(renderLatex).join('<br/>')
+  return <Tag className={className} style={style} dangerouslySetInnerHTML={{ __html: html }} />
+}
diff --git a/frontend/src/utils/latex.ts b/frontend/src/utils/latex.ts
new file mode 100644
index 0000000..a047d86
--- /dev/null
+++ b/frontend/src/utils/latex.ts
@@ -0,0 +1,42 @@
+import katex from 'katex'
+
+export const escapeHtml = (s: string): string =>
+  String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+
+export const renderLatex = (text: string): string => {
+  if (!text) return ''
+  let rest = String(text)
+  // display math: $$...$$
+  rest = rest.replace(/\$\$([\s\S]+?)\$\$/g, (_, tex: string) => {
+    try {
+      return `<span class="katex-display-wrap">${katex.renderToString(tex, { displayMode: true, throwOnError: false })}</span>`
+    } catch {
+      return `<code>${escapeHtml(tex)}</code>`
+    }
+  })
+  // inline math: $...$
+  rest = rest.replace(/\$([^$\n]+?)\$/g, (_, tex: string) => {
+    try {
+      return katex.renderToString(tex, { displayMode: false, throwOnError: false })
+    } catch {
+      return `<code>${escapeHtml(tex)}</code>`
+    }
+  })
+  return rest
+}
+
+export const highlightCode = (code: string, _lang: string): string => {
+  // escapeHtml runs first — no raw user content reaches the span injection
+  const escaped = escapeHtml(code)
+  return escaped
+    .replace(/(\/\/[^\n]*|#[^\n]*)/g, '<span class="cm-comment">$1</span>')
+    .replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="cm-string">$1</span>')
+    .replace(/\b(function|return|if|else|const|let|var|for|while|import|export|from|class|new|this|def|print|in|not|and|or|True|False|None|null|undefined|true|false)\b/g, '<span class="cm-keyword">$1</span>')
+    .replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="cm-number">$1</span>')
+    .replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/g, '<span class="cm-fn">$1</span>')
+}