fix: mermaid rendering fix from upstream

This commit is contained in:
Jacky Zhao 2023-12-19 11:01:55 -08:00
parent 4c83251f8e
commit 9b9d86474b
5 changed files with 22 additions and 26 deletions

8
package-lock.json generated
View file

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

View file

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

View file

@ -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.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.SyntaxHighlighting(),
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.GitHubFlavoredMarkdown(),
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
Plugin.Latex({ renderEngine: "katex" }),

View file

@ -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,32 +423,27 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
})
}
if (opts.mermaid) {
plugins.push(() => {
return (tree: Root, _file) => {
visit(tree, "code", (node: Code) => {
if (node.lang === "mermaid") {
node.data = {
hProperties: {
className: ["mermaid"],
},
}
}
})
}
})
}
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"]
}
}
}
})
}
})
}
if (opts.parseBlockReferences) {
plugins.push(() => {
const inlineTagTypes = new Set(["p", "li"])

View file

@ -328,12 +328,13 @@ figure[data-rehype-pretty-code-figure] {
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;
}