mermaid js support

astro.config.mjs

@@ -3,7 +3,8 @@ 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'
+import rehypeMermaid from 'rehype-mermaid';
+import remarkRehype from 'remark-rehype';
 
 export default defineConfig({
   site: 'https://bloginamatrix.xyz',
@@ -11,14 +12,14 @@ export default defineConfig({
     mdx({
       extendMarkdownConfig: true,
       optimize: true,
-      remarkPlugins: [remarkMath],
+      remarkPlugins: [remarkMath, remarkRehype],
       rehypePlugins: [rehypeKatex, rehypeMermaid]
     }),
     sitemap()],
 
   markdown: {
     gfm: true,
-    remarkPlugins: [remarkMath],
+    remarkPlugins: [remarkMath, remarkRehype],
     rehypePlugins: [rehypeKatex, rehypeMermaid],
   }
 });

package.json

@@ -14,8 +14,10 @@
     "@astrojs/rss": "^4.0.2",
     "@astrojs/sitemap": "^3.0.4",
     "astro": "^4.1.2",
+    "playwright": "^1.40.1",
     "rehype-katex": "^7.0.0",
     "rehype-mermaid": "^2.0.1",
-    "remark-math": "^6.0.0"
+    "remark-math": "^6.0.0",
+    "remark-rehype": "^11.1.0"
   }
 }

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   astro:
     specifier: ^4.1.2
     version: 4.1.2
+  playwright:
+    specifier: ^1.40.1
+    version: 1.40.1
   rehype-katex:
     specifier: ^7.0.0
     version: 7.0.0
@@ -26,6 +29,9 @@ dependencies:
   remark-math:
     specifier: ^6.0.0
     version: 6.0.0
+  remark-rehype:
+    specifier: ^11.1.0
+    version: 11.1.0
 
 packages:
 
@@ -1986,6 +1992,14 @@ packages:
     dev: false
     optional: true
 
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3691,6 +3705,16 @@ packages:
     hasBin: true
     dev: false
 
+  /playwright@1.40.1:
+    resolution: {integrity: sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright-core: 1.40.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: false
+
   /postcss@8.4.33:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}

src/content/blog/Example 2.md

@@ -35,6 +35,10 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
+```math
+\int_^1 f(x) dx
+```
+
 ```abc
 K:F
 !f!(fgag-g2c2)|

src/content/blog/using-mdx.mdx

@@ -33,4 +33,22 @@ this $\LaTeX$
 
 $$
 \KaTeX
-$$
+$$
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+```math
+\int_^1 f(x) dx
+```