From 9b9d86474bedd244daa45f4d76704b182d6a99ad Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 19 Dec 2023 19:01:55 +0000
Subject: [PATCH] fix: mermaid rendering fix from upstream
---
quartz/styles/base.scss | 5 +++--
package-lock.json | 8 ++++----
quartz/plugins/transformers/ofm.ts | 31 +++++++++++++------------------
package.json | 2 +-
quartz.config.ts | 2 +-
5 files changed, 22 insertions(+), 26 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 083c8c3..0bc4163 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0c9719b..252467e 100644
--- a/package.json
+++ b/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",
diff --git a/quartz.config.ts b/quartz.config.ts
index 0f6d256..f677a18 100644
--- a/quartz.config.ts
+++ b/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" }),
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 9adeff4..d0f2ee5 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/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"])
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index c0c5712..607749a 100644
--- a/quartz/styles/base.scss
+++ b/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;
}
--
Gitblit v1.10.0