fix: mermaid rendering fix from upstream

Jacky Zhao

2023-12-19 9b9d86474bedd244daa45f4d76704b182d6a99ad

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

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

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

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;
  }