Merge pull request #467 from unitaryfund/render-math-blog-posts

Render math in blog posts

astro.config.mjs

@@ -6,6 +6,8 @@ import { defineConfig } from 'astro/config';
 import remarkDirective from 'remark-directive';
 import remarkGfm from 'remark-gfm';
 import remarkOembed from 'remark-oembed';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 import {
   imageDirective,
   gistDirective,
@@ -49,10 +51,12 @@ export default defineConfig({
         },
       ],
       remarkDirective,
+      remarkMath,
       imageDirective,
       gistDirective,
       socialDirective,
     ],
+    rehypePlugins: [rehypeKatex],
   },
   vite: {
     plugins: [svgr()],

package.json

@@ -44,8 +44,10 @@
     "react-dom": "^18.0.0",
     "react-responsive": "^9.0.2",
     "react-use": "^17.4.0",
+    "rehype-katex": "^6.0.3",
     "remark-directive": "^2.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "remark-oembed": "^1.2.2",
     "swiper": "^9.3.2",
     "tailwind-merge": "^1.12.0",

src/layouts/Layout.astro

@@ -46,6 +46,10 @@ if (title) {
       as="style"
       onload="this.onload=null;this.rel='stylesheet'"
     />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+    onload="renderMathInElement(document.body);"></script>
     <meta name="viewport" content="width=device-width" />
     <title>{metaTitle}</title>
     {metaDescription && <meta name="description" content={metaDescription} />}