From 1ebd803190a0c13947d7bd100b859da35367db12 Mon Sep 17 00:00:00 2001
From: William Paek <wpaek@hawaii.edu>
Date: Sun, 12 Oct 2025 18:58:01 -1000
Subject: [PATCH] [Feature Request] LaTex Support

---
 apps/next/package.json                   |  5 ++++-
 apps/next/src/styles/globals.css         |  3 +++
 packages/components/package.json         |  7 +++++--
 packages/components/script-formatter.tsx | 12 ++++++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/next/package.json b/apps/next/package.json
index 0b6ce96d..6015524f 100644
--- a/apps/next/package.json
+++ b/apps/next/package.json
@@ -100,7 +100,9 @@
     "thumbhash": "^0.1.1",
     "use-fit-text": "^2.4.0",
     "zod": "^3.22.4",
-    "zustand": "^4.4.6"
+    "zustand": "^4.4.6",
+    "katex": "^0.16.8",
+    "react-katex": "^3.0.1"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
@@ -112,6 +114,7 @@
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^20.10.4",
     "@types/qrcode": "^1.5.5",
+    "@types/katex": "^0.16.7",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
diff --git a/apps/next/src/styles/globals.css b/apps/next/src/styles/globals.css
index 94f1704b..d24d4d0c 100644
--- a/apps/next/src/styles/globals.css
+++ b/apps/next/src/styles/globals.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+/* KaTeX CSS for LaTeX rendering */
+@import "katex/dist/katex.min.css";
+
 .betteruptime-announcement {
   position: relative !important;
   font-family: "Open Sans" !important;
diff --git a/packages/components/package.json b/packages/components/package.json
index 46a80196..29e8902e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -17,7 +17,9 @@
     "next-seo": "^6.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xss": "^1.0.14"
+    "xss": "^1.0.14",
+    "katex": "^0.16.8",
+    "react-katex": "^3.0.1"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,.tsx",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17"
+    "@types/react-dom": "^18.2.17",
+    "@types/katex": "^0.16.7"
   }
 }
diff --git a/packages/components/script-formatter.tsx b/packages/components/script-formatter.tsx
index 73d4d377..577bf2ea 100644
--- a/packages/components/script-formatter.tsx
+++ b/packages/components/script-formatter.tsx
@@ -1,10 +1,22 @@
 import React, { useMemo } from "react";
 
 import { formatScripts } from "@quenti/lib/scripts";
+import { LatexFormatter } from "./latex-formatter";
 
 export const ScriptFormatter = ({ children }: { children: string }) => {
   const formatted = useMemo(() => formatScripts(children), [children]);
 
+  // Check if the text contains LaTeX expressions
+  const hasLatex = useMemo(() => {
+    return /(\$\$[\s\S]*?\$\$|\$[^$\n]*?\$)/.test(children);
+  }, [children]);
+
+  // If LaTeX is detected, use LatexFormatter which will handle both LaTeX and regular text
+  if (hasLatex) {
+    return <LatexFormatter>{children}</LatexFormatter>;
+  }
+
+  // Otherwise, use the original script formatting
   return (
     <>
       {formatted.map((item, index) => (