add remark-math and katex

Author: ryodari

astro.config.mjs

@@ -4,24 +4,27 @@ import tailwindcss from '@tailwindcss/vite';
 import mdx from '@astrojs/mdx';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 import sitemap from '@astrojs/sitemap';
 
 export default defineConfig({
   site: 'https://beparano.id',
   output: 'static',
   markdown: {
+    remarkPlugins: [remarkMath],
     rehypePlugins: [
       rehypeSlug,
       [rehypeAutolinkHeadings, {
-      behavior: 'append',
-      properties: { class: 'heading-anchor', ariaHidden: 'true', tabIndex: -1 },
-      content: { type: 'text', value: '#' },
-    }],
+        behavior: 'append',
+        properties: { class: 'heading-anchor', ariaHidden: 'true', tabIndex: -1 },
+        content: { type: 'text', value: '#' },
+      }],
+      rehypeKatex,
     ],
   },
   vite: {
     plugins: [tailwindcss()],
   },
   integrations: [mdx(), sitemap()],
-});
+});

package-lock.json

@@ -19,7 +19,9 @@
     "@tailwindcss/vite": "^4.2.4",
     "astro": "^6.1.8",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-katex": "^7.0.1",
     "rehype-slug": "^6.0.0",
+    "remark-math": "^6.0.0",
     "tailwindcss": "^4.2.4"
   }
 }

package.json

@@ -43,6 +43,7 @@ const currentPath = Astro.url.pathname;
     <link rel="manifest" href="/site.webmanifest" />
 
     <link rel="alternate" type="application/rss+xml" title="beparano.id" href="/rss.xml" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" />
 
     <!-- Open Graph -->
     <meta property="og:title" content={pageTitle} />