yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mermaid rendering fix from upstream

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -41,7 +41,7 @@
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^7.0.0", "rehype-katex": "^7.0.0",
"rehype-mathjax": "^5.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-raw": "^7.0.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark": "^15.0.1", "remark": "^15.0.1",
@@ -4713,9 +4713,9 @@
} }
}, },
"node_modules/rehype-pretty-code": { "node_modules/rehype-pretty-code": {
"version": "0.12.2", "version": "0.12.3",
"resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.2.tgz", "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.3.tgz",
"integrity": "sha512-PiGNCFrCkt54G/3ez6RLfU38jWUmgDe60Y81PAxj69A7+EAbhp8UhEigVOwK9ZEJDyedPr0ORWhcqfOn4RNedg==", "integrity": "sha512-6NbIit8A3hLrkKBEbNs862jVnTLeIOM2AmM0VZ/MtyHb+OuNMeCa6UZSx6UG4zrobm5tY9efTwhih1exsGYsiw==",
"dependencies": { "dependencies": {
"@types/hast": "^3.0.3", "@types/hast": "^3.0.3",
"hast-util-to-string": "^3.0.0", "hast-util-to-string": "^3.0.0",

2
package.json
View File

@@ -66,7 +66,7 @@
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^7.0.0", "rehype-katex": "^7.0.0",
"rehype-mathjax": "^5.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-raw": "^7.0.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark": "^15.0.1", "remark": "^15.0.1",

2
quartz.config.ts
View File

@@ -49,8 +49,8 @@ const config: QuartzConfig = {
Plugin.CreatedModifiedDate({ Plugin.CreatedModifiedDate({
priority: ["frontmatter", "filesystem"], // you can add 'git' here for last modified from Git but this makes the build slower 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.SyntaxHighlighting(),
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.GitHubFlavoredMarkdown(), Plugin.GitHubFlavoredMarkdown(),
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
Plugin.Latex({ renderEngine: "katex" }), Plugin.Latex({ renderEngine: "katex" }),

31
quartz/plugins/transformers/ofm.ts
View File

@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types" 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 { Element, Literal, Root as HtmlRoot } from "hast"
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace" import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
import { slug as slugAnchor } from "github-slugger" import { slug as slugAnchor } from "github-slugger"
@@ -423,25 +423,15 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}) })
} }
return plugins
},
htmlPlugins() {
const plugins: PluggableList = [rehypeRaw]
if (opts.mermaid) { if (opts.mermaid) {
plugins.push(() => { plugins.push(() => {
return (tree: HtmlRoot, _file) => { return (tree: Root, _file) => {
visit(tree, "element", (node) => { visit(tree, "code", (node: Code) => {
if (node.tagName === "pre") { if (node.lang === "mermaid") {
const firstChild = node.children[0] node.data = {
if (firstChild && firstChild.type === "element" && firstChild.tagName === "code") { hProperties: {
const code = firstChild className: ["mermaid"],
const isMermaidBlock = },
(code.properties["className"] as Array<string>)?.[0] === "language-mermaid"
if (isMermaidBlock) {
node.children = code.children
node.properties.className = ["mermaid"]
}
} }
} }
}) })
@@ -449,6 +439,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}) })
} }
return plugins
},
htmlPlugins() {
const plugins: PluggableList = [rehypeRaw]
if (opts.parseBlockReferences) { if (opts.parseBlockReferences) {
plugins.push(() => { plugins.push(() => {
const inlineTagTypes = new Set(["p", "li"]) const inlineTagTypes = new Set(["p", "li"])

5
quartz/styles/base.scss
View File

@@ -328,12 +328,13 @@ figure[data-rehype-pretty-code-figure] {
pre { pre {
font-family: var(--codeFont); font-family: var(--codeFont);
padding: 0.5rem; padding: 0 0.5rem;
border-radius: 5px; border-radius: 5px;
overflow-x: auto; overflow-x: auto;
border: 1px solid var(--lightgray); border: 1px solid var(--lightgray);
position: relative;
&.mermaid { &:has(> code.mermaid) {
border: none; border: none;
} }