From 443cd53a1acf33ac0aaa34e0e75760d3da912d18 Mon Sep 17 00:00:00 2001 From: Jacky Zhao 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 81a7cd79b..083c8c39c 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 6871054fc..0c9719b93 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 f677a18f9..0f6d2564f 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 a9a32bed8..9adeff487 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 }) } + 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)?.[0] === "language-mermaid" + if (isMermaidBlock) { + node.children = code.children + node.properties.className = ["mermaid"] + } } } }) @@ -439,15 +449,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin }) } - 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 ebfa13780..c0c57126a 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 a185733e2..a572d891f 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 ( - + ) } }