fix: mermaid rendering fix from upstream

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.2",
+        "rehype-pretty-code": "^0.12.3",
         "rehype-raw": "^7.0.0",
         "rehype-slug": "^6.0.0",
         "remark": "^15.0.1",
@@ -4713,9 +4713,9 @@
       }
     },
     "node_modules/rehype-pretty-code": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.2.tgz",
-      "integrity": "sha512-PiGNCFrCkt54G/3ez6RLfU38jWUmgDe60Y81PAxj69A7+EAbhp8UhEigVOwK9ZEJDyedPr0ORWhcqfOn4RNedg==",
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.3.tgz",
+      "integrity": "sha512-6NbIit8A3hLrkKBEbNs862jVnTLeIOM2AmM0VZ/MtyHb+OuNMeCa6UZSx6UG4zrobm5tY9efTwhih1exsGYsiw==",
       "dependencies": {
         "@types/hast": "^3.0.3",
         "hast-util-to-string": "^3.0.0",

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.2",
+    "rehype-pretty-code": "^0.12.3",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",

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.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.SyntaxHighlighting(),
+      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       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, Paragraph } from "mdast"
+import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } 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,25 +423,15 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
         })
       }
 
-      return plugins
-    },
-    htmlPlugins() {
-      const plugins: PluggableList = [rehypeRaw]
-
       if (opts.mermaid) {
         plugins.push(() => {
-          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"]
-                  }
+          return (tree: Root, _file) => {
+            visit(tree, "code", (node: Code) => {
+              if (node.lang === "mermaid") {
+                node.data = {
+                  hProperties: {
+                    className: ["mermaid"],
+                  },
                 }
               }
             })
@@ -449,6 +439,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"])

quartz/styles/base.scss

@@ -328,12 +328,13 @@ figure[data-rehype-pretty-code-figure] {
 
 pre {
   font-family: var(--codeFont);
-  padding: 0.5rem;
+  padding: 0 0.5rem;
   border-radius: 5px;
   overflow-x: auto;
   border: 1px solid var(--lightgray);
+  position: relative;
 
-  &.mermaid {
+  &:has(> code.mermaid) {
     border: none;
   }