diff --git a/app/packages/rehype-mermaid/rehypeMermaid.ts b/app/packages/rehype-mermaid/rehypeMermaid.ts index b228644..619f8b3 100644 --- a/app/packages/rehype-mermaid/rehypeMermaid.ts +++ b/app/packages/rehype-mermaid/rehypeMermaid.ts @@ -1,9 +1,10 @@ import type { Plugin } from "unified"; -import type { Text, Element, Parent } from "hast"; +import type { Text, Element, Parent, Nodes } from "hast"; import { visit } from "unist-util-visit"; import { renderMermaid } from "@mermaid-js/mermaid-cli"; import puppeteer from "puppeteer"; import { parser } from "./parser"; +import type { Node } from "unist"; interface MermaidCodeBlock { textNode: Text; @@ -23,10 +24,10 @@ const rehypeMermaid: Plugin = () => { const checkIsMermaid = (lang: string): boolean => lang === "mermaid"; - return async (node) => { + return async (tree: Node) => { const mermaidCodeBlocks: MermaidCodeBlock[] = []; - visit(node, "element", (node: Element, index: number, parent: Parent) => { + visit(tree as Nodes, "element", (node, index, parent) => { // Check if the node is a pre tag with a single child if (!(node.tagName === "pre" && Array.isArray(node.children) && node.children.length === 1)) { return; @@ -60,7 +61,7 @@ const rehypeMermaid: Plugin = () => { const lang = parseLanguage(classNames); const isMermaid = checkIsMermaid(lang); - if (isMermaid && index !== null && parent !== null) { + if (isMermaid && index && parent) { mermaidCodeBlocks.push({ textNode, index, parent }); } }); diff --git a/app/packages/rehype-momiji/buildCodeBlock.ts b/app/packages/rehype-momiji/buildCodeBlock.ts index 5752dbd..d602c18 100644 --- a/app/packages/rehype-momiji/buildCodeBlock.ts +++ b/app/packages/rehype-momiji/buildCodeBlock.ts @@ -1,13 +1,9 @@ -import { bundledLanguages, bundledThemes, type BundledTheme } from "shiki"; -import { getHighlighter } from "./highlighter"; +import type { BundledLanguage, HighlighterGeneric, BundledTheme } from "shiki"; import { toHtml } from "hast-util-to-html"; -import type { Element } from "hast"; import { COLOR_SHIRONERI, COLOR_HAI } from "./colors"; -import { visit } from "unist-util-visit"; - -const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages }); const buildCodeBlock = ( + highlighter: HighlighterGeneric, rawCode: string, lang: string, theme: BundledTheme, @@ -15,44 +11,44 @@ const buildCodeBlock = ( filenameBGColor?: string, filenameTextColor?: string, ) => { - const hast = defaultHighlighter.codeToHast(rawCode, { - lang: lang, - theme: theme, - }); const filenameColorStyle = `background-color: ${filenameBGColor ?? COLOR_HAI}; color: ${filenameTextColor ?? COLOR_SHIRONERI};`; - if (filename === "") { - return toHtml(hast); - } + const hast = highlighter.codeToHast(rawCode, { + lang: lang, + theme: theme, + transformers: [ + { + pre(this, node) { + if (filename === "") return; - // Add filename to the code block if it exists - visit(hast, "element", (node: Element) => { - if ( - node.tagName === "pre" && - node.properties.class && - typeof node.properties.class === "string" && - node.properties.class.includes("shiki") - ) { - node.properties = { - class: node.properties.class, - style: `${node.properties.style}; padding-top: 48px;`, - tabindex: node.properties.tabindex, - }; + if ( + node.properties.class && + typeof node.properties.class === "string" && + node.properties.class.includes("shiki") + ) { + node.properties = { + class: node.properties.class, + style: `${node.properties.style}; padding-top: 48px;`, + tabindex: node.properties.tabindex, + }; - node.children.unshift({ - type: "element", - tagName: "div", - properties: { - style: `position: absolute; top: 0; left: 16px; width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${filenameColorStyle}`, + node.children.unshift({ + type: "element", + tagName: "div", + properties: { + style: `position: absolute; top: 0; left: 16px; width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${filenameColorStyle}`, + }, + children: [ + { + type: "text", + value: filename, + }, + ], + }); + } }, - children: [ - { - type: "text", - value: filename, - }, - ], - }); - } + }, + ], }); return toHtml(hast); diff --git a/app/packages/rehype-momiji/rehypeMomiji.ts b/app/packages/rehype-momiji/rehypeMomiji.ts index 2cf954a..7e0b747 100644 --- a/app/packages/rehype-momiji/rehypeMomiji.ts +++ b/app/packages/rehype-momiji/rehypeMomiji.ts @@ -1,7 +1,7 @@ import { bundledLanguages, bundledThemes, type BundledLanguage, type BundledTheme } from "shiki"; import type { Node } from "unist"; import type { Plugin } from "unified"; -import type { Text, Element } from "hast"; +import type { Text, Element, Nodes } from "hast"; import { visit } from "unist-util-visit"; import { getHighlighter } from "./highlighter"; import { parser } from "./parser"; @@ -18,7 +18,6 @@ interface Option { const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages }); const rehypeMomiji: Plugin = (options) => { - const langs = defaultHighlighter.getLoadedLanguages(); const { theme = "github-dark-default", fallbackLang = "c", @@ -27,6 +26,8 @@ const rehypeMomiji: Plugin = (options) => { filenameTextColor, } = options; + const langs = defaultHighlighter.getLoadedLanguages(); + const parseLanguage = (classNames: string[]): string | undefined => { for (const className of classNames) { if (className.startsWith("language-")) { @@ -41,8 +42,8 @@ const rehypeMomiji: Plugin = (options) => { return fallbackLang; }; - return (node: Node) => { - visit(node, "element", (node: Element) => { + return (tree: Node) => { + visit(tree as Nodes, "element", (node) => { // Check if the node is a pre tag with a single child if (!(node.tagName === "pre" && Array.isArray(node.children) && node.children.length === 1)) { return; @@ -89,7 +90,15 @@ const rehypeMomiji: Plugin = (options) => { const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? ""; - const codeBlock = buildCodeBlock(rawCode, supportedLang, theme, filename, filenameBGColor, filenameTextColor); + const codeBlock = buildCodeBlock( + defaultHighlighter, + rawCode, + supportedLang, + theme, + filename, + filenameBGColor, + filenameTextColor, + ); const container = `
diff --git a/package.json b/package.json index 0f0896b..32454b5 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "remark-frontmatter": "^5.0.0", "remark-gfm": "^4.0.0", "remark-mdx-frontmatter": "^5.0.0", - "shiki": "^1.23.0", + "shiki": "^1.23.1", "unified": "^11.0.5", "unist": "^0.0.1", "unist-util-visit": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45e1567..6a21075 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -79,8 +79,8 @@ importers: specifier: ^5.0.0 version: 5.0.0 shiki: - specifier: ^1.23.0 - version: 1.23.0 + specifier: ^1.23.1 + version: 1.23.1 unified: specifier: ^11.0.5 version: 11.0.5 @@ -749,17 +749,17 @@ packages: cpu: [x64] os: [win32] - '@shikijs/core@1.23.0': - resolution: {integrity: sha512-J4Fo22oBlfRHAXec+1AEzcowv+Qdf4ZQkuP/X/UHYH9+KA9LvyFXSXyS+HxuBRFfon+u7bsmKdRBjoZlbDVRkQ==} + '@shikijs/core@1.23.1': + resolution: {integrity: sha512-NuOVgwcHgVC6jBVH5V7iblziw6iQbWWHrj5IlZI3Fqu2yx9awH7OIQkXIcsHsUmY19ckwSgUMgrqExEyP5A0TA==} - '@shikijs/engine-javascript@1.23.0': - resolution: {integrity: sha512-CcrppseWShG+8Efp1iil9divltuXVdCaU4iu+CKvzTGZO5RmXyAiSx668M7VbX8+s/vt1ZKu75Vn/jWi8O3G/Q==} + '@shikijs/engine-javascript@1.23.1': + resolution: {integrity: sha512-i/LdEwT5k3FVu07SiApRFwRcSJs5QM9+tod5vYCPig1Ywi8GR30zcujbxGQFJHwYD7A5BUqagi8o5KS+LEVgBg==} - '@shikijs/engine-oniguruma@1.23.0': - resolution: {integrity: sha512-gS8bZLqVvmZXX+E5JUMJICsBp+kx6gj79MH/UEpKHKIqnUzppgbmEn6zLa6mB5D+sHse2gFei3YYJxQe1EzZXQ==} + '@shikijs/engine-oniguruma@1.23.1': + resolution: {integrity: sha512-KQ+lgeJJ5m2ISbUZudLR1qHeH3MnSs2mjFg7bnencgs5jDVPeJ2NVDJ3N5ZHbcTsOIh0qIueyAJnwg7lg7kwXQ==} - '@shikijs/types@1.23.0': - resolution: {integrity: sha512-HiwzsihRao+IbPk7FER/EQT/D0dEEK3n5LAtHDzL5iRT+JMblA7y9uitUnjEnHeLkKigNM+ZplrP7MuEyyc5kA==} + '@shikijs/types@1.23.1': + resolution: {integrity: sha512-98A5hGyEhzzAgQh2dAeHKrWW4HfCMeoFER2z16p5eJ+vmPeF6lZ/elEne6/UCU551F/WqkopqRsr1l2Yu6+A0g==} '@shikijs/vscode-textmate@9.3.0': resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==} @@ -2195,8 +2195,8 @@ packages: resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==} engines: {node: '>=18'} - oniguruma-to-es@0.1.2: - resolution: {integrity: sha512-sBYKVJlIMB0WPO+tSu/NNB1ytSFeHyyJZ3Ayxfx3f/QUuXu0lvZk0VB4K7npmdlHSC0ldqanzh/sUSlAbgCTfw==} + oniguruma-to-es@0.4.1: + resolution: {integrity: sha512-rNcEohFz095QKGRovP/yqPIKc+nP+Sjs4YTHMv33nMePGKrq/r2eu9Yh4646M5XluGJsUnmwoXuiXE69KDs+fQ==} pac-proxy-agent@7.0.2: resolution: {integrity: sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==} @@ -2337,8 +2337,8 @@ packages: regex-utilities@2.3.0: resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} - regex@4.4.0: - resolution: {integrity: sha512-uCUSuobNVeqUupowbdZub6ggI5/JZkYyJdDogddJr60L764oxC2pMZov1fQ3wM9bdyzUILDG+Sqx6NAKAz9rKQ==} + regex@5.0.2: + resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==} rehype-parse@9.0.1: resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} @@ -2441,8 +2441,8 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} - shiki@1.23.0: - resolution: {integrity: sha512-xfdu9DqPkIpExH29cmiTlgo0/jBki5la1Tkfhsv+Wu5TT3APLNHslR1acxuKJOCWqVdSc+pIbs/2ozjVRGppdg==} + shiki@1.23.1: + resolution: {integrity: sha512-8kxV9TH4pXgdKGxNOkrSMydn1Xf6It8lsle0fiqxf7a1149K1WGtdOu3Zb91T5r1JpvRPxqxU3C2XdZZXQnrig==} signal-exit@4.1.0: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} @@ -3293,27 +3293,27 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.20.0': optional: true - '@shikijs/core@1.23.0': + '@shikijs/core@1.23.1': dependencies: - '@shikijs/engine-javascript': 1.23.0 - '@shikijs/engine-oniguruma': 1.23.0 - '@shikijs/types': 1.23.0 + '@shikijs/engine-javascript': 1.23.1 + '@shikijs/engine-oniguruma': 1.23.1 + '@shikijs/types': 1.23.1 '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4 hast-util-to-html: 9.0.3 - '@shikijs/engine-javascript@1.23.0': + '@shikijs/engine-javascript@1.23.1': dependencies: - '@shikijs/types': 1.23.0 + '@shikijs/types': 1.23.1 '@shikijs/vscode-textmate': 9.3.0 - oniguruma-to-es: 0.1.2 + oniguruma-to-es: 0.4.1 - '@shikijs/engine-oniguruma@1.23.0': + '@shikijs/engine-oniguruma@1.23.1': dependencies: - '@shikijs/types': 1.23.0 + '@shikijs/types': 1.23.1 '@shikijs/vscode-textmate': 9.3.0 - '@shikijs/types@1.23.0': + '@shikijs/types@1.23.1': dependencies: '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4 @@ -5236,10 +5236,10 @@ snapshots: dependencies: mimic-function: 5.0.1 - oniguruma-to-es@0.1.2: + oniguruma-to-es@0.4.1: dependencies: emoji-regex-xs: 1.0.0 - regex: 4.4.0 + regex: 5.0.2 regex-recursion: 4.2.1 pac-proxy-agent@7.0.2: @@ -5431,7 +5431,9 @@ snapshots: regex-utilities@2.3.0: {} - regex@4.4.0: {} + regex@5.0.2: + dependencies: + regex-utilities: 2.3.0 rehype-parse@9.0.1: dependencies: @@ -5591,12 +5593,12 @@ snapshots: shebang-regex@3.0.0: {} - shiki@1.23.0: + shiki@1.23.1: dependencies: - '@shikijs/core': 1.23.0 - '@shikijs/engine-javascript': 1.23.0 - '@shikijs/engine-oniguruma': 1.23.0 - '@shikijs/types': 1.23.0 + '@shikijs/core': 1.23.1 + '@shikijs/engine-javascript': 1.23.1 + '@shikijs/engine-oniguruma': 1.23.1 + '@shikijs/types': 1.23.1 '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4