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

package-lock.json

@@ -41,7 +41,7 @@
         "rehype-autolink-headings": "^7.1.0",
         "rehype-katex": "^7.0.0",
         "rehype-mathjax": "^5.0.0",
-        "rehype-pretty-code": "^0.12.1",
+        "rehype-pretty-code": "^0.12.2",
         "rehype-raw": "^7.0.0",
         "rehype-slug": "^6.0.0",
         "remark": "^15.0.1",
@@ -54,7 +54,7 @@
         "remark-smartypants": "^2.0.0",
         "rimraf": "^5.0.5",
         "serve-handler": "^6.1.5",
-        "shikiji": "^0.8.7",
+        "shikiji": "^0.9.9",
         "source-map-support": "^0.5.21",
         "to-vfile": "^8.0.0",
         "toml": "^3.0.0",
@@ -4713,9 +4713,9 @@
       }
     },
     "node_modules/rehype-pretty-code": {
-      "version": "0.12.1",
+      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.2.tgz",
-      "integrity": "sha512-QeGvAPTc31KwP52wBjXqdXXfBAhEs6wETNlOcZRkaPKZZo6Alsz0U6yY05cCKQK53xYNeDCClVYDCyVMl3SP1Q==",
+      "integrity": "sha512-PiGNCFrCkt54G/3ez6RLfU38jWUmgDe60Y81PAxj69A7+EAbhp8UhEigVOwK9ZEJDyedPr0ORWhcqfOn4RNedg==",
       "dependencies": {
         "@types/hast": "^3.0.3",
         "hast-util-to-string": "^3.0.0",
@@ -4728,7 +4728,7 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "shikiji": "^0.7.0 || ^0.8.0"
+        "shikiji": "^0.7.0 || ^0.8.0 || ^0.9.0"
       }
     },
     "node_modules/rehype-raw": {
@@ -5314,13 +5314,18 @@
       }
     },
     "node_modules/shikiji": {
-      "version": "0.8.7",
+      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.8.7.tgz",
+      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.9.tgz",
-      "integrity": "sha512-j5usxwI0yHkDTHOuhuSJl9+wT5CNYeYO82dJMSJBlJ/NYT5SIebGcPoL6y9QOyH15wGrJC4LOP2nz5k8mUDGRQ==",
+      "integrity": "sha512-/S3unr/0mZTstNOuAmNDEufeimtqeQb8lXvPMLsYfDvqyfmG6334bO2xmDzD0kfxH2y8gnFgSWAJpdEzksmYXg==",
       "dependencies": {
-        "hast-util-to-html": "^9.0.0"
+        "shikiji-core": "0.9.9"
       }
     },
+    "node_modules/shikiji-core": {
+      "version": "0.9.9",
+      "resolved": "https://registry.npmjs.org/shikiji-core/-/shikiji-core-0.9.9.tgz",
+      "integrity": "sha512-qu5Qq7Co6JIMY312J9Ek6WYjXieeyJT/fIqmkcjF4MdnMNlUnhSqPo8/42g5UdPgdyTCwijS7Nhg8DfLSLodkg=="
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",

package.json

@@ -66,7 +66,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.0",
     "rehype-mathjax": "^5.0.0",
-    "rehype-pretty-code": "^0.12.1",
+    "rehype-pretty-code": "^0.12.2",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -79,7 +79,7 @@
     "remark-smartypants": "^2.0.0",
     "rimraf": "^5.0.5",
     "serve-handler": "^6.1.5",
-    "shikiji": "^0.8.7",
+    "shikiji": "^0.9.9",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",

quartz.config.ts

@@ -49,8 +49,8 @@ const config: QuartzConfig = {
       Plugin.CreatedModifiedDate({
         priority: ["frontmatter", "filesystem"], // you can add 'git' here for last modified from Git but this makes the build slower
       }),
-      Plugin.SyntaxHighlighting(),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
+      Plugin.SyntaxHighlighting(),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Latex({ renderEngine: "katex" }),

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) => {
+          return (tree: HtmlRoot, _file) => {
-            visit(tree, "code", (node: Code) => {
+            visit(tree, "element", (node) => {
-              if (node.lang === "mermaid") {
+              if (node.tagName === "pre") {
-                node.data = {
+                const firstChild = node.children[0]
-                  hProperties: {
+                if (firstChild && firstChild.type === "element" && firstChild.tagName === "code") {
-                    className: ["mermaid"],
+                  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) => {

quartz/styles/base.scss

@@ -333,7 +333,7 @@ pre {
   overflow-x: auto;
   border: 1px solid var(--lightgray);
 
-  &:has(> code.mermaid) {
+  &.mermaid {
     border: none;
   }
 

quartz/util/resources.tsx

@@ -26,9 +26,12 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
   } else {
     const content = resource.script
     return (
-      <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>
+      <script
-        {content}
+        key={randomUUID()}
-      </script>
+        type={scriptType}
+        spa-preserve={spaPreserve}
+        dangerouslySetInnerHTML={{ __html: content }}
+      ></script>
     )
   }
 }