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

Jacky Zhao

2023-12-19 443cd53a1acf33ac0aaa34e0e75760d3da912d18

 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 @@
        })
      }

      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 @@
        })
      }

      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) => {