zensical · squidfunk · Jul 21, 2026 · Jul 21, 2026
diff --git a/integrations/code/media/fonts/KaTeX_AMS-Regular.woff2 b/integrations/code/media/fonts/KaTeX_AMS-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Caligraphic-Bold.woff2 b/integrations/code/media/fonts/KaTeX_Caligraphic-Bold.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Caligraphic-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Caligraphic-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Fraktur-Bold.woff2 b/integrations/code/media/fonts/KaTeX_Fraktur-Bold.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Fraktur-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Fraktur-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Main-Bold.woff2 b/integrations/code/media/fonts/KaTeX_Main-Bold.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Main-BoldItalic.woff2 b/integrations/code/media/fonts/KaTeX_Main-BoldItalic.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Main-Italic.woff2 b/integrations/code/media/fonts/KaTeX_Main-Italic.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Main-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Main-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Math-BoldItalic.woff2 b/integrations/code/media/fonts/KaTeX_Math-BoldItalic.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Math-Italic.woff2 b/integrations/code/media/fonts/KaTeX_Math-Italic.woff2
diff --git a/integrations/code/media/fonts/KaTeX_SansSerif-Bold.woff2 b/integrations/code/media/fonts/KaTeX_SansSerif-Bold.woff2
diff --git a/integrations/code/media/fonts/KaTeX_SansSerif-Italic.woff2 b/integrations/code/media/fonts/KaTeX_SansSerif-Italic.woff2
diff --git a/integrations/code/media/fonts/KaTeX_SansSerif-Regular.woff2 b/integrations/code/media/fonts/KaTeX_SansSerif-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Script-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Script-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Size1-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Size1-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Size2-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Size2-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Size3-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Size3-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Size4-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Size4-Regular.woff2
diff --git a/integrations/code/media/fonts/KaTeX_Typewriter-Regular.woff2 b/integrations/code/media/fonts/KaTeX_Typewriter-Regular.woff2
diff --git a/integrations/code/media/katex.LICENSE.txt b/integrations/code/media/katex.LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2020 Khan Academy and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/integrations/code/media/katex.min.css b/integrations/code/media/katex.min.css
diff --git a/integrations/code/media/katex.min.js b/integrations/code/media/katex.min.js
diff --git a/integrations/code/media/preview.html b/integrations/code/media/preview.html
@@ -12,6 +12,7 @@
     <base id="preview-base">
     <link rel="stylesheet" href="__STYLESHEET__">
     <link rel="stylesheet" href="__PALETTE__">
+    <link rel="stylesheet" href="__KATEX_STYLESHEET__">
     <style>
       img {
         max-width: 100%;
@@ -42,6 +43,7 @@
       }
 
     </style>
+    <script nonce="__NONCE__" src="__KATEX__"></script>
   </head>
   <body
     dir="ltr"
@@ -237,6 +239,41 @@
         });
       }
 
+      function typesetMath() {
+        const mathNodes = [...preview.querySelectorAll(".arithmatex")];
+        if (!window.katex) return;
+
+        try {
+          const delimiters = [
+            { left: "$$", right: "$$", displayMode: true },
+            { left: "$", right: "$", displayMode: false },
+            { left: "\\[", right: "\\]", displayMode: true },
+            { left: "\\(", right: "\\)", displayMode: false },
+          ];
+          for (const node of mathNodes) {
+            const source = node.textContent.trim();
+            const delimiter = delimiters.find(
+              ({ left, right }) =>
+                source.startsWith(left) && source.endsWith(right),
+            );
+            const expression = delimiter
+              ? source.slice(
+                  delimiter.left.length,
+                  source.length - delimiter.right.length,
+                )
+              : source;
+            if (!expression) continue;
+            node.replaceChildren();
+            window.katex.render(expression, node, {
+              displayMode: delimiter?.displayMode ?? node.tagName === "DIV",
+              throwOnError: false,
+            });
+          }
+        } catch (error) {
+          // Ignore invalid expressions so one math block cannot break preview updates.
+        }
+      }
+
       function utf8Index(text) {
         const encoder = new TextEncoder();
         const bytes = [];
@@ -468,6 +505,7 @@
         preview.replaceChildren(
           ...sanitizeHtml(decorateHtml(update.html, update.mappings || [])),
         );
+        typesetMath();
         restoreUiState(renderedUri);
         revealPendingFragment();
         if (activeSourceOffset !== null) {

diff --git a/integrations/code/package-lock.json b/integrations/code/package-lock.json
diff --git a/integrations/code/package.json b/integrations/code/package.json
@@ -40,6 +40,7 @@
     "@types/semver": "^7.7.1",
     "@types/vscode": "^1.100.0",
     "esbuild": "^0.28.1",
+    "katex": "0.16.22",
     "typescript": "^6.0.3"
   },
   "allowScripts": {

diff --git a/integrations/code/src/preview.ts b/integrations/code/src/preview.ts
@@ -532,12 +532,18 @@ function previewHtml(
   const palette = webview.asWebviewUri(
     vscode.Uri.joinPath(extensionUri, "media", "palette.css"),
   );
+  const katex = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionUri, "media", "katex.min.js"),
+  );
+  const katexStylesheet = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionUri, "media", "katex.min.css"),
+  );
   const csp = [
     "default-src 'none'",
     `img-src ${webview.cspSource} data: https:`,
     `style-src ${webview.cspSource} 'unsafe-inline'`,
-    "font-src https://zensical.org data:",
-    `script-src 'nonce-${nonce}'`,
+    `font-src ${webview.cspSource} data:`,
+    `script-src 'nonce-${nonce}' ${webview.cspSource}`,
     `base-uri ${webview.cspSource}`,
     "form-action 'none'",
   ].join("; ");
@@ -549,7 +555,9 @@ function previewHtml(
     .replaceAll("__CSP__", csp)
     .replaceAll("__NONCE__", nonce)
     .replaceAll("__STYLESHEET__", stylesheet.toString())
-    .replaceAll("__PALETTE__", palette.toString());
+    .replaceAll("__PALETTE__", palette.toString())
+    .replaceAll("__KATEX__", katex.toString())
+    .replaceAll("__KATEX_STYLESHEET__", katexStylesheet.toString());
 }
 
 /**