chore(share): set up math

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();
 }
 
 /**

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")) {

packages/share-theme/package.json

@@ -22,6 +22,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
+    "katex": "0.16.25",
     "mermaid": "11.12.0"
   },
   "devDependencies": {

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);

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");
+}

packages/share-theme/src/styles/content.css

@@ -46,4 +46,8 @@
 
 #content img {
     max-width: 100%;
+}
+
+body:not(.math-loaded) .math-tex {
+    visibility: hidden;
 }

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: