Switched to rehype-mermaid

Author: ChristineTham

.github/workflows/deploy.yml

@@ -20,6 +20,8 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Install, build, and upload your site
         uses: withastro/action@v2
         # with:

README.md

@@ -240,4 +240,6 @@ All commands are run from the root of the project, from a terminal:
   - automatically generated sidebar links
   - improved RSS and search metadata
 - 5.0.0: Major changes:
-  - Upgrade to Astro 5.X
+  - Upgrade to Astro 5.X
+  - Changed Leaflet CSS to always use latest
+  - Migrate from bespoke mermaid implementation to rehype-mermaid

astro.config.mjs

@@ -7,35 +7,33 @@ import robotsTxt from 'astro-robots-txt';
 import remarkMath from 'remark-math';
 import remarkEmoji from 'remark-emoji';
 import rehypeKatex from 'rehype-katex';
+import rehypeMermaid from 'rehype-mermaid';
 import remarkPlantUML from '@akebifiky/remark-simple-plantuml';
 import { remarkReadingTime } from './remark-plugins/remark-reading-time.mjs';
 import { remarkDiagram } from './remark-plugins/remark-diagram.mjs';
 import icon from "astro-icon";
 
 import markdoc from "@astrojs/markdoc";
 
+import expressiveCode from 'astro-expressive-code';
+
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
     ssr: {
       external: ['svgo'],
-      noExternal: ['swiper', 'leaflet']
-    }
+      noExternal: ['swiper']
+    },
+    optimizeDeps: { include: ['leaflet'] }
   },
   site: 'https://hellotham.github.io',
   base: '/hello-astro/',
-  integrations: [icon(), sitemap(), mdx(), alpinejs(), robotsTxt(), markdoc()],
+  integrations: [icon(), sitemap(), alpinejs(), robotsTxt(), markdoc(), expressiveCode(), mdx()],
   markdown: {
     extendDefaultPlugins: true,
     remarkPlugins: [remarkReadingTime, remarkMath, remarkPlantUML, remarkDiagram, remarkEmoji],
-    rehypePlugins: [rehypeKatex],
-    shikiConfig: {
-      theme: 'github-light',
-      langs: [],
-      // Enable word wrap to prevent horizontal scrolling
-      wrap: true
-    },
+    rehypePlugins: [rehypeMermaid, rehypeKatex]
   },
-  scopedStyleStrategy: "where",
-});
+  scopedStyleStrategy: 'where'
+})

package.json

@@ -55,6 +55,8 @@
     "@iconify-json/bi": "^1.2.2",
     "@iconify-json/heroicons": "^1.2.2",
     "@tailwindcss/vite": "^4.0.6",
+    "astro-expressive-code": "^0.40.2",
+    "astro-geo-map": "^2.0.0",
     "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
     "hero-patterns": "^2.1.0",
@@ -64,6 +66,8 @@
     "mermaid": "^11.4.1",
     "photoswipe": "^5.4.4",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
+    "playwright": "^1.50.1",
+    "rehype-mermaid": "^3.0.0",
     "swiper": "^11.2.4",
     "tailwindcss": "^4.0.6"
   },