Fixed KaTeX Logic

src/app.scss

@@ -107,7 +107,6 @@ body, button, input, select, textarea {
   }
 }
 
-
 @keyframes rotating {
   from {
     transform: rotate(0deg);
@@ -861,6 +860,8 @@ aside.menu.main-menu .menu-expanse {
   max-width: calc(100% - 40px);
 }
 
+@import "/node_modules/katex/dist/katex.min.css";
+
 .katex-html {
   display: none;
 }

src/lib/Code.svelte

@@ -27,8 +27,8 @@
     type LanguageType
   } from 'svelte-highlight/languages/index'
 
-  import katex from 'katex'
   import 'katex/contrib/mhchem'
+  import renderMathInElement from 'katex/contrib/auto-render'
 
   export const type: 'code' = 'code'
   export const raw: string = ''
@@ -36,16 +36,20 @@
   export let lang: string | undefined
   export let text: string
 
-  let renderedMath: string | undefined
-
-  $: if (lang === 'rendermath') {
-    renderedMath = katex.renderToString(text, {
-      throwOnError: false,
-      displayMode: true
-    })
-  } else {
-    renderedMath = undefined
-  }
+  let renderedMath: string | undefined;
+  // if ( text.startsWith('\\[') ) {
+  //   let dummy = document.createElement("div")
+  //   dummy.textContent = text;
+  //   renderMathInElement(dummy, {
+  //       delimiters: [
+  //           {left: '\\(', right: '\\)', display: false},
+  //           {left: '\\[', right: '\\]', display: true}
+  //       ],
+  //       throwOnError : true,
+  //     })
+  //   renderedMath = dummy.innerHTML;
+  //   dummy.remove();
+  // }
 
   // Map lang string to LanguageType
   let language: LanguageType<string>
@@ -131,7 +135,7 @@
   {@html style}
 </svelte:head>
 
-{#if lang === 'rendermath'}
+{#if renderedMath}
   {@html renderedMath}
 {:else}
   <div class="code-block is-relative">

src/lib/Codespan.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
   export let raw
-  import katex from 'katex'
   import 'katex/contrib/mhchem'
+  import renderMathInElement from 'katex/contrib/auto-render'
 
   let renderedMath: string | undefined
-  if (raw.startsWith('`rendermath')) {
-    renderedMath = katex.renderToString(raw.replace(/`rendermath|`/g, ''), {
-      throwOnError: false,
-      displayMode: false
+  if ( raw.startsWith('`\\(') || raw.startsWith('`\\[') ) {
+    let dummy = document.createElement("div")
+    dummy.textContent = raw.replace(/`/g, '')
+    renderMathInElement(dummy, {
+        delimiters: [
+            {left: '\\(', right: '\\)', display: false},
+            {left: '\\[', right: '\\]', display: true}
+        ],
+        throwOnError : false,
+        // output: "mathml"
       })
+    renderedMath = dummy.innerHTML;
+    dummy.remove();
   }
 
 </script>

src/lib/EditMessage.svelte

@@ -14,8 +14,6 @@
   import { getImage } from './ImageStore.svelte'
   import { getModelDetail } from './Models.svelte'
 
-  import 'katex/dist/katex.min.css'
-
   export let message:Message
   export let chatId:number
   export let chat:Chat
@@ -223,42 +221,55 @@
     document.body.removeChild(a)
   }
 
-  const preprocessMath = (text: string): string => {
-    let codeBlockPlaceholderPrefix = '__prefix__c0d3b10ck__'
-    while (text.indexOf(codeBlockPlaceholderPrefix) > 0) {
-      codeBlockPlaceholderPrefix = codeBlockPlaceholderPrefix + '_'
+  const replaceLatexDelimiters = (text: string): string => {
+    let result = '';
+    let i = 0;
+
+    while (i < text.length) {
+      if (text.startsWith('\\(', i)) {
+        let endPos = text.indexOf('\\)', i + 2);
+        if (endPos === -1) {
+          console.error(`LaTeX: Delimiter mismatch at ${i}`)
+          result += text[i];
+          i++;
+        } else {
+          result += '`\\(' + text.slice(i + 2, endPos) + '\\)`';
+          i = endPos + 2;
         }
-    let index = 0
-    const codeBlocks = []
-
-    const codeBlockRegex = /(```[\s\S]*?```|`[^`]*`)/g
-  
-    text = text.replace(codeBlockRegex, (match) => {
-      const placeholder = `${codeBlockPlaceholderPrefix}idx${index}__`
-      codeBlocks.push(match)
-      index++
-      return placeholder
-    })
-
-    text = text
-      .replace(/(\\\[((?:\s|\S)*?)\\\])|(\$\$((?:\s|\S)*?)\$\$)/g, (match, p1, p2, p3, p4) => {
-        const math = p2 || p4
-        return '\n```rendermath\n' + math.trim() + '\n```\n'
-      })
-      .replace(/(\\\((?!\$)(.*?)\\\))|(?<!\\|\$)\$(?!\$)(.*?[^\\])\$(?!\$)/g, (match, p1, p2, p3) => {
-        const math = p2 || p3
-        return '`rendermath' + math.trim() + '`'
-      })
-
-    text = text.replace(new RegExp(`${codeBlockPlaceholderPrefix}idx(\\d+)__`, 'g'), (match, p1) => {
-      return codeBlocks[p1]
-    })
-
-    return text
+      } else if (text.startsWith('\\[', i)) {
+        let endPos = text.indexOf('\\]', i + 2);
+        if (endPos === -1) {
+          console.error(`LaTeX: Delimiter mismatch at ${i}`)
+          result += text[i];
+          i++;
+        } else {
+          result += `\`\\[${text.slice(i + 2, endPos)}\\]\``;
+          i = endPos + 2;
+        }
+      } else {
+        if (text.startsWith('\\(', i)) {
+          result += '\\(';
+          i += 2;
+        } else if (text.startsWith('\\)', i)) {
+          result += '\\)';
+          i += 2;
+        } else if (text.startsWith('\\[', i)) {
+          result += '\\[';
+          i += 2;
+        } else if (text.startsWith('\\]', i)) {
+          result += '\\]';
+          i += 2;
+        } else {
+          result += text[i];
+          i++;
+        }
+      }
+    }
+    return result
   }
 
   const renderMathMsg = () => {
-    displayMessage = preprocessMath(message.content);
+    displayMessage = replaceLatexDelimiters(message.content);
   };
 
 </script>
@@ -300,7 +311,7 @@
         {/if}
         {#key refreshCounter}
         <SvelteMarkdown 
-          source={preprocessMath(displayMessage)}
+          source={replaceLatexDelimiters(displayMessage)}
           options={markdownOptions}
           renderers={renderers}
         />