From 5f7edc0ded187d86712639f3f7c48e6e4d72927b Mon Sep 17 00:00:00 2001
From: sigoden <sigoden@gmail.com>
Date: Fri, 6 Dec 2024 07:36:16 +0800
Subject: [PATCH] feat: webui supports math in markdown (#1039)

---
 assets/arena.html      | 30 +++++++++++++++++-------------
 assets/playground.html | 30 +++++++++++++++++-------------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/assets/arena.html b/assets/arena.html
index 8590cd06..7adad83e 100644
--- a/assets/arena.html
+++ b/assets/arena.html
@@ -6,13 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   <title>AIChat LLM Arena</title>
+  <link rel="stylesheet" href="//unpkg.com/katex@0.16.11/dist/katex.min.css">
   <link rel="stylesheet" href="//unpkg.com/github-markdown-css@5.8.1/github-markdown.css">
   <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.10.0/styles/github-dark.min.css"
     media="screen and (prefers-color-scheme: dark)">
   <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.10.0/styles/github.min.css"
     media="screen and (prefers-color-scheme: light)">
-  <script src="//unpkg.com/@highlightjs/cdn-assets@11.10.0/highlight.min.js"></script>
-  <script src="//unpkg.com/marked@12.0.2/lib/marked.umd.js" defer></script>
+  <script src="//unpkg.com/@highlightjs/cdn-assets@11.10.0/highlight.min.js" defer></script>
+  <script src="//unpkg.com/marked@15.0.3/lib/marked.umd.js" defer></script>
+  <script src="//unpkg.com/katex@0.16.11/dist/katex.min.js" defer></script>
+  <script src="//unpkg.com/@sigodenjs/marked-katex-extension@1.0.0/lib/index.umd.js" defer></script>
   <script src="//unpkg.com/alpinejs@3.14.6/dist/cdn.min.js" defer></script>
   <style>
     :root {
@@ -989,24 +992,25 @@
     }
 
     function setupMarked() {
-      const renderer = new marked.Renderer();
-      renderer.code = (code, language) => {
-        const validLang = !!(language && hljs.getLanguage(language));
-
-        const highlighted = validLang
-          ? hljs.highlight(code, { language }).value
-          : escapeForHTML(code);
-
-        return `<div class="code-block">
-        <pre><code class="hljs ${language}">${highlighted}</code></pre>
+      const renderer = {
+        code({ text, lang }) {
+          const validLang = !!(lang && hljs.getLanguage(lang));
+          const highlighted = validLang
+            ? hljs.highlight(text, { language: lang }).value
+            : escapeForHTML(text);
+
+          return `<div class="code-block">
+        <pre><code class="hljs ${lang}">${highlighted}</code></pre>
   <div class="copy-code-btn" @click="handleCopyCode" title="Copy code">
     <svg fill="currentColor" viewBox="0 0 16 16">
       <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
     </svg>
   </div>
 </div>`;
+        }
       };
-      marked.setOptions({ renderer });
+      marked.use({ renderer });
+      marked.use(markedKatex({ throwOnError: false, inlineTolerantNoSpace: true  }));
     }
 
     function escapeForHTML(input) {
diff --git a/assets/playground.html b/assets/playground.html
index 30f2b506..e7b8e11e 100644
--- a/assets/playground.html
+++ b/assets/playground.html
@@ -6,13 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   <title>AIChat LLM Playground</title>
+  <link rel="stylesheet" href="//unpkg.com/katex@0.16.11/dist/katex.min.css">
   <link rel="stylesheet" href="//unpkg.com/github-markdown-css@5.8.1/github-markdown.css">
   <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.10.0/styles/github-dark.min.css"
     media="screen and (prefers-color-scheme: dark)">
   <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.10.0/styles/github.min.css"
     media="screen and (prefers-color-scheme: light)">
-  <script src="//unpkg.com/@highlightjs/cdn-assets@11.10.0/highlight.min.js"></script>
-  <script src="//unpkg.com/marked@12.0.2/lib/marked.umd.js" defer></script>
+  <script src="//unpkg.com/@highlightjs/cdn-assets@11.10.0/highlight.min.js" defer></script>
+  <script src="//unpkg.com/marked@15.0.3/lib/marked.umd.js" defer></script>
+  <script src="//unpkg.com/katex@0.16.11/dist/katex.min.js" defer></script>
+  <script src="//unpkg.com/@sigodenjs/marked-katex-extension@1.0.0/lib/index.umd.js" defer></script>
   <script src="//unpkg.com/alpinejs@3.14.6/dist/cdn.min.js" defer></script>
   <style>
     :root {
@@ -1470,24 +1473,25 @@
     }
 
     function setupMarked() {
-      const renderer = new marked.Renderer();
-      renderer.code = (code, language) => {
-        const validLang = !!(language && hljs.getLanguage(language));
-
-        const highlighted = validLang
-          ? hljs.highlight(code, { language }).value
-          : escapeForHTML(code);
-
-        return `<div class="code-block">
-        <pre><code class="hljs ${language}">${highlighted}</code></pre>
+      const renderer = {
+        code({ text, lang }) {
+          const validLang = !!(lang && hljs.getLanguage(lang));
+          const highlighted = validLang
+            ? hljs.highlight(text, { language: lang }).value
+            : escapeForHTML(text);
+
+          return `<div class="code-block">
+        <pre><code class="hljs ${lang}">${highlighted}</code></pre>
   <div class="copy-code-btn" @click="handleCopyCode" title="Copy code">
     <svg fill="currentColor" viewBox="0 0 16 16">
       <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
     </svg>
   </div>
 </div>`;
+        }
       };
-      marked.setOptions({ renderer });
+      marked.use({ renderer });
+      marked.use(markedKatex({ throwOnError: false, inlineTolerantNoSpace: true }));
     }
 
     function escapeForHTML(input) {