add katex/math rendering

astro.config.mjs

@@ -1,8 +1,24 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeMermaid from 'rehype-mermaid'
 
 export default defineConfig({
   site: 'https://bloginamatrix.xyz',
-  integrations: [mdx(), sitemap()]
-});
+  integrations: [
+    mdx({
+      extendMarkdownConfig: true,
+      optimize: true,
+      remarkPlugins: [remarkMath],
+      rehypePlugins: [rehypeKatex, rehypeMermaid]
+    }),
+    sitemap()],
+
+  markdown: {
+    gfm: true,
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [rehypeKatex, rehypeMermaid],
+  }
+});

package.json

@@ -13,6 +13,9 @@
     "@astrojs/mdx": "^2.0.4",
     "@astrojs/rss": "^4.0.2",
     "@astrojs/sitemap": "^3.0.4",
-    "astro": "^4.1.2"
+    "astro": "^4.1.2",
+    "rehype-katex": "^7.0.0",
+    "rehype-mermaid": "^2.0.1",
+    "remark-math": "^6.0.0"
   }
 }

src/components/BaseHead.astro

@@ -45,3 +45,5 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">