From e3dd25b5918148924de4cf2e2fcf74c0573eb1c1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 24 Oct 2025 21:10:31 +0300
Subject: [PATCH] chore(share): set up math

---
 apps/client/src/share.ts                         |  9 ---------
 apps/server/src/share/content_renderer.ts        |  1 +
 packages/share-theme/package.json                |  1 +
 packages/share-theme/src/scripts/index.ts        |  2 ++
 packages/share-theme/src/scripts/modules/math.ts | 13 +++++++++++++
 packages/share-theme/src/styles/content.css      |  4 ++++
 pnpm-lock.yaml                                   |  7 +++----
 7 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 packages/share-theme/src/scripts/modules/math.ts

diff --git a/apps/client/src/share.ts b/apps/client/src/share.ts
index d073baca1..602f7e95c 100644
--- a/apps/client/src/share.ts
+++ b/apps/client/src/share.ts
@@ -9,15 +9,7 @@ async function ensureJQuery() {
     (window as any).$ = $;
 }
 
-async function applyMath() {
-    const anyMathBlock = document.querySelector("#content .math-tex");
-    if (!anyMathBlock) {
-        return;
-    }
 
-    const renderMathInElement = (await import("./services/math.js")).renderMathInElement;
-    renderMathInElement(document.getElementById("content"));
-}
 
 async function formatCodeBlocks() {
     const anyCodeBlock = document.querySelector("#content pre");
@@ -31,7 +23,6 @@ async function formatCodeBlocks() {
 
 async function setupTextNote() {
     formatCodeBlocks();
-    applyMath();
 }
 
 /**
diff --git a/apps/server/src/share/content_renderer.ts b/apps/server/src/share/content_renderer.ts
index aa42ecf44..3b5ce0a6d 100644
--- a/apps/server/src/share/content_renderer.ts
+++ b/apps/server/src/share/content_renderer.ts
@@ -99,6 +99,7 @@ export function renderNoteContent(note: SNote) {
     const cssToLoad: string[] = [];
     if (!note.isLabelTruthy("shareOmitDefaultCss")) {
         cssToLoad.push(`assets/styles.css`);
+        cssToLoad.push(`assets/scripts.css`);
         cssToLoad.push(`assets/boxicons.css`);
     }
     for (const cssRelation of note.getRelations("shareCss")) {
diff --git a/packages/share-theme/package.json b/packages/share-theme/package.json
index 515a6fc02..ecaacfb52 100644
--- a/packages/share-theme/package.json
+++ b/packages/share-theme/package.json
@@ -22,6 +22,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
+    "katex": "0.16.25",
     "mermaid": "11.12.0"
   },
   "devDependencies": {
diff --git a/packages/share-theme/src/scripts/index.ts b/packages/share-theme/src/scripts/index.ts
index 03c5c101c..fbbc864d0 100644
--- a/packages/share-theme/src/scripts/index.ts
+++ b/packages/share-theme/src/scripts/index.ts
@@ -4,6 +4,7 @@ import setupMobileMenu from "./modules/mobile";
 import setupSearch from "./modules/search";
 import setupThemeSelector from "./modules/theme";
 import setupMermaid from "./modules/mermaid";
+import setupMath from "./modules/math";
 
 function $try<T extends (...a: unknown[]) => unknown>(func: T, ...args: Parameters<T>) {
     try {
@@ -20,3 +21,4 @@ $try(setupExpanders);
 $try(setupMobileMenu);
 $try(setupSearch);
 $try(setupMermaid);
+$try(setupMath);
diff --git a/packages/share-theme/src/scripts/modules/math.ts b/packages/share-theme/src/scripts/modules/math.ts
new file mode 100644
index 000000000..a1c3195ac
--- /dev/null
+++ b/packages/share-theme/src/scripts/modules/math.ts
@@ -0,0 +1,13 @@
+export default async function setupMath() {
+    const anyMathBlock = document.querySelector("#content .math-tex");
+    if (!anyMathBlock) {
+        return;
+    }
+
+    const renderMathInElement = (await import("katex/contrib/auto-render")).default;
+    await import("katex/contrib/mhchem");
+    await import("katex/dist/katex.min.css");
+
+    renderMathInElement(document.getElementById("content"));
+    document.body.classList.add("math-loaded");
+}
diff --git a/packages/share-theme/src/styles/content.css b/packages/share-theme/src/styles/content.css
index d500888a6..e67be725a 100644
--- a/packages/share-theme/src/styles/content.css
+++ b/packages/share-theme/src/styles/content.css
@@ -46,4 +46,8 @@
 
 #content img {
     max-width: 100%;
+}
+
+body:not(.math-loaded) .math-tex {
+    visibility: hidden;
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2755aca2..c8eab1bc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1329,6 +1329,9 @@ importers:
 
   packages/share-theme:
     dependencies:
+      katex:
+        specifier: 0.16.25
+        version: 0.16.25
       mermaid:
         specifier: 11.12.0
         version: 11.12.0
@@ -15085,8 +15088,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.1.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15837,8 +15838,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.1.0':
     dependencies: