From 443cd53a1acf33ac0aaa34e0e75760d3da912d18 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 18 Dec 2023 23:09:49 -0800
Subject: [PATCH] fix: mermaid rendering broken after rehype-pretty-code bump
(closes #638)
---
package-lock.json | 25 +++++++++++++----------
package.json | 4 ++--
quartz.config.ts | 2 +-
quartz/plugins/transformers/ofm.ts | 32 ++++++++++++++++++------------
quartz/styles/base.scss | 2 +-
quartz/util/resources.tsx | 9 ++++++---
6 files changed, 44 insertions(+), 30 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 81a7cd7..083c8c3 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.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",
- "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.1.tgz",
- "integrity": "sha512-QeGvAPTc31KwP52wBjXqdXXfBAhEs6wETNlOcZRkaPKZZo6Alsz0U6yY05cCKQK53xYNeDCClVYDCyVMl3SP1Q==",
+ "version": "0.12.2",
+ "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.2.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.8.7.tgz",
- "integrity": "sha512-j5usxwI0yHkDTHOuhuSJl9+wT5CNYeYO82dJMSJBlJ/NYT5SIebGcPoL6y9QOyH15wGrJC4LOP2nz5k8mUDGRQ==",
+ "version": "0.9.9",
+ "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.9.tgz",
+ "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",
diff --git a/package.json b/package.json
index 6871054..0c9719b 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.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",
diff --git a/quartz.config.ts b/quartz.config.ts
index f677a18..0f6d256 100644
--- a/quartz.config.ts
+++ b/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" }),
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index a9a32be..9adeff4 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, 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) => {
- 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 @@ 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) => {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index ebfa137..c0c5712 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -333,7 +333,7 @@ pre {
overflow-x: auto;
border: 1px solid var(--lightgray);
- &:has(> code.mermaid) {
+ &.mermaid {
border: none;
}
diff --git a/quartz/util/resources.tsx b/quartz/util/resources.tsx
index a185733..a572d89 100644
--- a/quartz/util/resources.tsx
+++ b/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}>
- {content}
- </script>
+ <script
+ key={randomUUID()}
+ type={scriptType}
+ spa-preserve={spaPreserve}
+ dangerouslySetInnerHTML={{ __html: content }}
+ ></script>
)
}
}