From 443cd53a1acf33ac0aaa34e0e75760d3da912d18 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 19 Dec 2023 07:09:49 +0000
Subject: [PATCH] fix: mermaid rendering broken after rehype-pretty-code bump (closes #638)
---
quartz/plugins/transformers/ofm.ts | 32 +++++++++++++++++++-------------
1 files changed, 19 insertions(+), 13 deletions(-)
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 @@
})
}
+ 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 @@
})
}
- 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) => {
--
Gitblit v1.10.0