tanabe · OrF8 · May 19, 2026 · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git a/dist/assets/index-BEfDAM6P.js b/dist/assets/index-BEfDAM6P.js
diff --git a/dist/css/style.css b/dist/css/style.css
@@ -29,7 +29,7 @@ p {
 
 a:link,
 a:visited,
-a:hover
+a:hover,
 a:active {
   text-decoration: none;
 }
@@ -148,6 +148,13 @@ footer {
   white-space: normal;
 }
 
+#output .katex-display {
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 0.2em 0;
+}
+
+
 .split-container {
   display: flex;
   height: 100%;

diff --git a/dist/index.html b/dist/index.html
@@ -1,85 +1,86 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta http-equiv="content-language" content="en">
-    <meta http-equiv="content-script-type" content="text/javascript">
-    <meta http-equiv="content-style-type" content="text/css">
-    <meta name="description" content="This is the online markdown editor with live preview.">
-
-    <script>
-      (function(){
-        try {
-          var BOOT_THEME_KEY = 'com.markdownlivepreview_theme';
-          var raw = localStorage.getItem(BOOT_THEME_KEY);
-          var useDark = raw === 'dark';
-          document.documentElement.setAttribute('data-theme', useDark ? 'dark' : 'light');
-
-          var PREVIEW_CSS_LIGHT = 'css/github-markdown-light.css?v=1.11.0';
-          var PREVIEW_CSS_DARK = 'css/github-markdown-dark_dimmed.css?v=1.11.0';
-          var href = useDark ? PREVIEW_CSS_DARK : PREVIEW_CSS_LIGHT;
-
-          var link = document.createElement('link');
-          link.id = 'gh-markdown-link';
-          link.rel = 'stylesheet';
-          link.type = 'text/css';
-          link.href = href;
-          document.head.appendChild(link);
-        } catch (e) {
-          // ignore — app will correct theme after load
-        }
-      })();
-    </script>
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=1.11.0">
-    <link rel="icon" type="image/png" href="favicon.png">
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <title>Markdown Live Preview</title>
-    <script type="module" crossorigin src="/assets/index-BEfDAM6P.js"></script>
-  </head>
-
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-77C1GEG9C8"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-
-    gtag('config', 'G-77C1GEG9C8');
-  </script>
-
-  <body>
-
-    <header>
-        <div id="menu-items">
-            <div><a href="/">Markdown Live Preview</a></div>
-            <div id="reset-button"><a href="#">Reset</a></div>
-            <div id="copy-button"><a href="#">Copy</a></div>
-            <div id="export-button"><a href="#">Export PDF</a></div>
-            <div id="sync-button">
-              <input type="checkbox" id="sync-scroll-checkbox"><label for="sync-scroll-checkbox">Sync scroll</label>
-              <span style="margin-left:12px;"><input type="checkbox" id="theme-checkbox"><label for="theme-checkbox">Dark mode</label></span>
-            </div>
-        </div>
-        <div id="github"><a href="https://github.com/tanabe/markdown-live-preview"><img src="image/GitHub-Mark-Light-32px.webp"></a></div>
-    </header>
-
-    <div id="container" class="split-container">
-
-        <div id="edit" class="column editor-pane">
-            <div id="editor-wrapper">
-                <div id="editor"></div>
-            </div>
-        </div>
-
-        <div id="split-divider" class="split-divider"></div>
-
-        <div id="preview" class="column preview-pane">
-            <div id="preview-wrapper">
-                <div id="output" class="content markdown-body"></div>
-            </div>
-        </div>
-    </div>
-
-    <footer></footer>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta http-equiv="content-language" content="en">
+    <meta http-equiv="content-script-type" content="text/javascript">
+    <meta http-equiv="content-style-type" content="text/css">
+    <meta name="description" content="This is the online markdown editor with live preview.">
+
+    <script>
+      (function(){
+        try {
+          var BOOT_THEME_KEY = 'com.markdownlivepreview_theme';
+          var raw = localStorage.getItem(BOOT_THEME_KEY);
+          var useDark = raw === 'dark';
+          document.documentElement.setAttribute('data-theme', useDark ? 'dark' : 'light');
+
+          var PREVIEW_CSS_LIGHT = 'css/github-markdown-light.css?v=1.11.0';
+          var PREVIEW_CSS_DARK = 'css/github-markdown-dark_dimmed.css?v=1.11.0';
+          var href = useDark ? PREVIEW_CSS_DARK : PREVIEW_CSS_LIGHT;
+
+          var link = document.createElement('link');
+          link.id = 'gh-markdown-link';
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          link.href = href;
+          document.head.appendChild(link);
+        } catch (e) {
+          // ignore — app will correct theme after load
+        }
+      })();
+    </script>
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=1.11.0">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous" referrerpolicy="no-referrer">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <title>Markdown Live Preview</title>
+    <script type="module" crossorigin src="/assets/index-CND5zqbx.js"></script>
+  </head>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-77C1GEG9C8"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-77C1GEG9C8');
+  </script>
+
+  <body>
+
+    <header>
+        <div id="menu-items">
+            <div><a href="/">Markdown Live Preview</a></div>
+            <div id="reset-button"><a href="#">Reset</a></div>
+            <div id="copy-button"><a href="#">Copy</a></div>
+            <div id="export-button"><a href="#">Export PDF</a></div>
+            <div id="sync-button">
+              <input type="checkbox" id="sync-scroll-checkbox"><label for="sync-scroll-checkbox">Sync scroll</label>
+              <span style="margin-left:12px;"><input type="checkbox" id="theme-checkbox"><label for="theme-checkbox">Dark mode</label></span>
+            </div>
+        </div>
+        <div id="github"><a href="https://github.com/tanabe/markdown-live-preview"><img src="image/GitHub-Mark-Light-32px.webp"></a></div>
+    </header>
+
+    <div id="container" class="split-container">
+
+        <div id="edit" class="column editor-pane">
+            <div id="editor-wrapper">
+                <div id="editor"></div>
+            </div>
+        </div>
+
+        <div id="split-divider" class="split-divider"></div>
+
+        <div id="preview" class="column preview-pane">
+            <div id="preview-wrapper">
+                <div id="output" class="content markdown-body"></div>
+            </div>
+        </div>
+    </div>
+
+    <footer></footer>
+  </body>
+</html>

diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
       })();
     </script>
     <link rel="stylesheet" type="text/css" href="css/style.css?v=1.11.0">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="icon" type="image/png" href="favicon.png">
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="module" src="/src/main.js?v=1.11.0"></script>

diff --git a/public/css/style.css b/public/css/style.css
@@ -29,7 +29,7 @@ p {
 
 a:link,
 a:visited,
-a:hover
+a:hover,
 a:active {
   text-decoration: none;
 }
@@ -148,6 +148,13 @@ footer {
   white-space: normal;
 }
 
+#output .katex-display {
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 0.2em 0;
+}
+
+
 .split-container {
   display: flex;
   height: 100%;

diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,27 @@
 import Storehouse from 'storehouse-js';
 import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/+esm';
-import { marked } from 'marked';
+import {marked} from 'marked';
 import DOMPurify from 'dompurify';
 
+const JSDELIVR_BASE_URL = 'https://cdn.jsdelivr.net/npm';
+const KATEX_VERSION = '0.16.22';
+const MARKED_KATEX_EXTENSION_VERSION = '5.1.4';
+const FALLBACK_KATEX_CSS_URL = `${JSDELIVR_BASE_URL}/katex@${KATEX_VERSION}/dist/katex.min.css`;
+const getKatexCssUrl = () => {
+    if (typeof document === 'undefined') {
+        return FALLBACK_KATEX_CSS_URL;
+    }
+    const katexStylesheet = document.querySelector('link[rel="stylesheet"][href*="katex.min.css"]');
+    return katexStylesheet?.href || FALLBACK_KATEX_CSS_URL;
+};
+const KATEX_CSS_URL = getKatexCssUrl();
+const KATEX_BASE_URL = KATEX_CSS_URL.replace(/\/katex\.min\.css(?:\?.*)?$/, '');
+const MARKED_KATEX_EXTENSION_URL = `${JSDELIVR_BASE_URL}/marked-katex-extension@${MARKED_KATEX_EXTENSION_VERSION}/+esm`;
+
+const rewriteKatexFontUrls = (cssText) => {
+    return cssText.replace(/url\((['"]?)fonts\//g, `url($1${KATEX_BASE_URL}/fonts/`);
+};
+
 const init = () => {
     let hasEdited = false;
     let scrollBarSync = false;
@@ -82,6 +101,16 @@ ${"`"}${"`"}${"`"}
 ## Inline code
 
 This web site is using ${"`"}markedjs/marked${"`"}.
+
+## Math
+
+Inline math: $x^2 + y^2 = z^2$
+
+Display math:
+
+$$
+\\int_0^1 x^2\\,dx = \\frac{1}{3}
+$$
 `;
 
     self.MonacoEnvironment = {
@@ -145,8 +174,7 @@ This web site is using ${"`"}markedjs/marked${"`"}.
             mangle: false
         };
         let html = marked.parse(markdown, options);
-        let sanitized = DOMPurify.sanitize(html);
-        document.querySelector('#output').innerHTML = sanitized;
+        document.querySelector('#output').innerHTML = DOMPurify.sanitize(html);
     };
 
     // Reset input text
@@ -270,6 +298,7 @@ This web site is using ${"`"}markedjs/marked${"`"}.
     // ----- export preview -----
 
     let exportLightCssPromise = null;
+    let exportKatexCssPromise = null;
 
     let getLightMarkdownCss = () => {
         if (exportLightCssPromise) {
@@ -292,6 +321,27 @@ This web site is using ${"`"}markedjs/marked${"`"}.
         return exportLightCssPromise;
     };
 
+    let getKatexCss = () => {
+        if (exportKatexCssPromise) {
+            return exportKatexCssPromise;
+        }
+
+        exportKatexCssPromise = fetch(KATEX_CSS_URL)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Failed to load KaTeX CSS: ${response.status}`);
+                }
+                return response.text();
+            })
+            .catch((error) => {
+                // eslint-disable-next-line no-console
+                console.error('Failed to load KaTeX CSS', error);
+                return '';
+            });
+
+        return exportKatexCssPromise;
+    };
+
     let exportPreviewToPdf = () => {
         const previewElement = document.querySelector('#preview-wrapper');
         if (!previewElement) {
@@ -303,7 +353,7 @@ This web site is using ${"`"}markedjs/marked${"`"}.
             return;
         }
 
-        getLightMarkdownCss().then((lightCss) => {
+        Promise.all([getLightMarkdownCss(), getKatexCss()]).then(([lightCss, katexCss]) => {
             const options = {
                 margin: 10,
                 filename: 'markdown-preview.pdf',
@@ -330,6 +380,13 @@ This web site is using ${"`"}markedjs/marked${"`"}.
                             clonedDoc.head.appendChild(style);
                         }
 
+                        if (katexCss) {
+                            const katexStyle = clonedDoc.createElement('style');
+                            katexStyle.id = 'export-katex-css';
+                            katexStyle.textContent = rewriteKatexFontUrls(katexCss);
+                            clonedDoc.head.appendChild(katexStyle);
+                        }
+
                         const clonedPreview = clonedDoc.getElementById('preview-wrapper');
                         if (clonedPreview) {
                             clonedPreview.style.background = '#fff';
@@ -544,6 +601,18 @@ This web site is using ${"`"}markedjs/marked${"`"}.
     initThemeToggle(themeSettings);
 
     setupDivider();
+
+    import(MARKED_KATEX_EXTENSION_URL)
+        .then(({ default: markedKatex }) => {
+            marked.use(markedKatex({
+                throwOnError: false,
+            }));
+            convert(editor.getValue());
+        })
+        .catch((error) => {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to load KaTeX extension; continuing without math rendering.', error);
+        });
 };
 
 window.addEventListener("load", () => {