fix: mermaid rendering broken after rehype-pretty-code bump (closes #638)

quartz/plugins/transformers/ofm.ts

@@ -1,5 +1,5 @@
 import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Code, Paragraph } from "mdast"
+import { Root, Html, BlockContent, DefinitionContent, Paragraph } from "mdast"
 import { Element, Literal, Root as HtmlRoot } from "hast"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
 import { slug as slugAnchor } from "github-slugger"
@@ -423,15 +423,25 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
         })
       }
 
+      return plugins
+    },
+    htmlPlugins() {
+      const plugins: PluggableList = [rehypeRaw]
+
       if (opts.mermaid) {
         plugins.push(() => {
-          return (tree: Root, _file) => {
-            visit(tree, "code", (node: Code) => {
-              if (node.lang === "mermaid") {
-                node.data = {
-                  hProperties: {
-                    className: ["mermaid"],
-                  },
+          return (tree: HtmlRoot, _file) => {
+            visit(tree, "element", (node) => {
+              if (node.tagName === "pre") {
+                const firstChild = node.children[0]
+                if (firstChild && firstChild.type === "element" && firstChild.tagName === "code") {
+                  const code = firstChild
+                  const isMermaidBlock =
+                    (code.properties["className"] as Array<string>)?.[0] === "language-mermaid"
+                  if (isMermaidBlock) {
+                    node.children = code.children
+                    node.properties.className = ["mermaid"]
+                  }
                 }
               }
             })
@@ -439,15 +449,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
         })
       }
 
-      return plugins
-    },
-    htmlPlugins() {
-      const plugins: PluggableList = [rehypeRaw]
       if (opts.parseBlockReferences) {
         plugins.push(() => {
           const inlineTagTypes = new Set(["p", "li"])
           const blockTagTypes = new Set(["blockquote"])
-          return (tree, file) => {
+          return (tree: HtmlRoot, file) => {
             file.data.blocks = {}
 
             visit(tree, "element", (node, index, parent) => {