added math renderer

frontend/src/pages/posts/[slug].astro

@@ -71,10 +71,15 @@ function formatSlug(slug: string) {
     )}
 
     {post && (
-      <div class="prose prose-invert max-w-none" set:html={html} />
+      <div class="prose prose-invert max-w-none" id="post-content" set:html={html} />
     )}
   </article>
 
+  <!-- KaTeX for LaTeX Math Rendering -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcixnb4m+ezBfu/FvC5sOkwP9b22Rk/Bq43H1rEof80A8o2D46rG1E+mI1R2bFwY" crossorigin="anonymous">
+  <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-bO3k+X9sX7L9yI1eKRA32gSbx6Hj5v/F7rV+6hD4S7tU09QZfOa0W1B9TjJkC3O" crossorigin="anonymous"></script>
+  <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-ks2B3Fey1s3qC3pS2aT5lC00u0d3W8e/2X2o551u0hGkQWjR0L0rYxYpA2Wn5+iA" crossorigin="anonymous"></script>
+
   <script>
     if (localStorage.getItem('admin_token')) {
       const editBtn = document.getElementById('edit-btn');
@@ -82,5 +87,22 @@ function formatSlug(slug: string) {
         editBtn.style.display = 'inline-flex';
       }
     }
+
+    // Initialize KaTeX auto-render on the post content
+    document.addEventListener("DOMContentLoaded", function() {
+        const content = document.getElementById('post-content');
+        if (content) {
+            // @ts-ignore
+            renderMathInElement(content, {
+                delimiters: [
+                    {left: '$$', right: '$$', display: true},
+                    {left: '$', right: '$', display: false},
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true}
+                ],
+                throwOnError: false
+            });
+        }
+    });
   </script>
 </Layout>