diff --git a/app/packages/rehype-mermaid/README.md b/app/packages/rehype-mermaid/README.md index f06f4d6..9ee180d 100644 --- a/app/packages/rehype-mermaid/README.md +++ b/app/packages/rehype-mermaid/README.md @@ -5,7 +5,3 @@ ## features - Generating Mermaid Diagrams - -## How to use? - -example usage of rehype-mermaid diff --git a/app/packages/rehype-mermaid/docs/assets/rehype-mermaid-sample.png b/app/packages/rehype-mermaid/docs/assets/rehype-mermaid-sample.png deleted file mode 100644 index e5e95a2..0000000 Binary files a/app/packages/rehype-mermaid/docs/assets/rehype-mermaid-sample.png and /dev/null differ diff --git a/app/packages/rehype-mermaid/rehypeMermaid.ts b/app/packages/rehype-mermaid/rehypeMermaid.ts index b445c7f..c1b7107 100644 --- a/app/packages/rehype-mermaid/rehypeMermaid.ts +++ b/app/packages/rehype-mermaid/rehypeMermaid.ts @@ -1,4 +1,4 @@ -import type { Plugin } from "unified"; +import type { Plugin, Transformer } from "unified"; import type { Text, Parent, Root } from "hast"; import { visit } from "unist-util-visit"; import { renderMermaid } from "@mermaid-js/mermaid-cli"; @@ -23,8 +23,8 @@ const rehypeMermaid: Plugin<[], Root> = () => { const checkIsMermaid = (lang: string): boolean => lang === "mermaid"; - return async (tree) => { - const mermaidCodeBlocks: MermaidCodeBlock[] = []; + const transformer: Transformer = async (tree) => { + const mermaidCodeBlockPromises: MermaidCodeBlock[] = []; visit(tree, "element", (node, index, parent) => { // Check if the node is a pre tag with a single child @@ -61,11 +61,11 @@ const rehypeMermaid: Plugin<[], Root> = () => { const isMermaid = checkIsMermaid(lang); if (isMermaid && index && parent) { - mermaidCodeBlocks.push({ textNode, index, parent }); + mermaidCodeBlockPromises.push({ textNode, index, parent }); } }); - if (mermaidCodeBlocks.length === 0) { + if (mermaidCodeBlockPromises.length === 0) { return; } @@ -76,7 +76,7 @@ const rehypeMermaid: Plugin<[], Root> = () => { const decoder = new TextDecoder(); await Promise.all( - mermaidCodeBlocks.map(async ({ textNode, index, parent }, blockIndex) => { + mermaidCodeBlockPromises.map(async ({ textNode, index, parent }, blockIndex) => { const { data: svgBuffer } = await renderMermaid(browser, textNode.value, "svg"); const svgElem = decoder.decode(svgBuffer).replaceAll("my-svg", `my-svg-${blockIndex}`); @@ -95,6 +95,8 @@ const rehypeMermaid: Plugin<[], Root> = () => { await browser.close(); }; + + return transformer; }; export default rehypeMermaid; diff --git a/app/packages/rehype-momiji/README.md b/app/packages/rehype-momiji/README.md index 8ccf8da..e151c89 100644 --- a/app/packages/rehype-momiji/README.md +++ b/app/packages/rehype-momiji/README.md @@ -1,4 +1,4 @@ -# rehype-momiji (in development) +# rehype-momiji [rehype](https://github.com/rehypejs/rehype) plugin powered by [shiki](https://shiki.matsu.io/). @@ -9,6 +9,4 @@ ## How to use? -When you want only highlighting code block, just use this package. If you want to display a filename, you also need to use `remark-momiji`. - -example usage of rehype-momiji +When you want only highlighting code block, just use this package. If you want to display a filename, you also need to use `remark-momiji-title`. diff --git a/app/packages/rehype-momiji/buildCodeBlock.ts b/app/packages/rehype-momiji/buildCodeBlock.ts index 933dc27..99adf5b 100644 --- a/app/packages/rehype-momiji/buildCodeBlock.ts +++ b/app/packages/rehype-momiji/buildCodeBlock.ts @@ -1,6 +1,6 @@ import type { BundledLanguage, HighlighterGeneric, BundledTheme } from "shiki"; import { COLOR_SHIRONERI, COLOR_HAI } from "./colors"; -import type { Root } from "hast"; +import type { Element } from "hast"; const buildCodeBlock = ( highlighter: HighlighterGeneric, @@ -10,7 +10,7 @@ const buildCodeBlock = ( filename: string, filenameBGColor?: string, filenameTextColor?: string, -): Root => { +): Element | undefined => { const hast = highlighter.codeToHast(rawCode, { lang: lang, theme: theme, @@ -50,7 +50,11 @@ const buildCodeBlock = ( ], }); - return hast; + if (hast.children[0].type !== "element") { + return; + } + + return hast.children[0]; }; export { buildCodeBlock }; diff --git a/app/packages/rehype-momiji/docs/assets/rehype-momiji-sample.png b/app/packages/rehype-momiji/docs/assets/rehype-momiji-sample.png deleted file mode 100644 index 7ca4ef6..0000000 Binary files a/app/packages/rehype-momiji/docs/assets/rehype-momiji-sample.png and /dev/null differ diff --git a/app/packages/rehype-momiji/index.ts b/app/packages/rehype-momiji/index.ts index 1464377..997a739 100644 --- a/app/packages/rehype-momiji/index.ts +++ b/app/packages/rehype-momiji/index.ts @@ -93,23 +93,24 @@ const rehypeMomiji: Plugin = (options) => { const supportedLang = checkSupportedLanguage(lang); - const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? ""; + const filename = codeElem.properties["data-remark-code-title"] ?? ""; const codeBlock = buildCodeBlock( defaultHighlighter, rawCode, supportedLang, theme, - filename, + String(filename), filenameBGColor, filenameTextColor, ); + if (!codeBlock) return; node.tagName = "div"; - node.children = codeBlock.children as ElementContent[]; + node.children = [codeBlock]; node.properties.style = "position: relative;"; }); }; }; -export default rehypeMomiji; +export { rehypeMomiji }; diff --git a/app/packages/remark-momiji-filename/index.ts b/app/packages/remark-momiji-title/index.ts similarity index 65% rename from app/packages/remark-momiji-filename/index.ts rename to app/packages/remark-momiji-title/index.ts index 76108b0..e496cd3 100644 --- a/app/packages/remark-momiji-filename/index.ts +++ b/app/packages/remark-momiji-title/index.ts @@ -2,7 +2,7 @@ import { visit } from "unist-util-visit"; import type { Root } from "mdast"; import type { Plugin } from "unified"; -const remarkMomijiFilename: Plugin<[], Root> = () => { +const remarkMomijiTitle: Plugin<[], Root> = () => { return (tree) => { visit(tree, "code", (node) => { const metaString = `${node.lang ?? ""} ${node.meta ?? ""}`.trim(); @@ -11,14 +11,13 @@ const remarkMomijiFilename: Plugin<[], Root> = () => { const [title] = metaString.match(/(?<=title=("|'))(.*?)(?=("|'))/) ?? [""]; if (!title) return; - if (!node.data) { - node.data = {}; - } - node.data.hProperties = { - "data-remark-code-filename": title, + node.data = { + hProperties: { + "data-remark-code-title": title, + }, }; }); }; }; -export default remarkMomijiFilename; +export { remarkMomijiTitle }; diff --git a/vite.config.ts b/vite.config.ts index 0e83709..5eec036 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,8 +8,8 @@ import remarkBreaks from 'remark-breaks'; import remarkFrontmatter from 'remark-frontmatter'; import remarkMdxFrontmatter from 'remark-mdx-frontmatter'; import remarkGfm from 'remark-gfm' -import rehypeMomiji from './app/packages/rehype-momiji' -import remarkMomijiCodeFilename from './app/packages/remark-momiji-filename' +import { rehypeMomiji } from './app/packages/rehype-momiji' +import { remarkMomijiTitle } from './app/packages/remark-momiji-title' import rehypeMermaid from './app/packages/rehype-mermaid/rehypeMermaid' import { remarkAttentionBlock } from './app/packages/remark-attention-block' import { rehypeAttentionBlock } from './app/packages/rehype-attention-block' @@ -25,7 +25,7 @@ export default defineConfig(() => { ssg({ entry: "./app/server.ts" }), mdx({ jsxImportSource: 'hono/jsx', - remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename, remarkAttentionBlock], + remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiTitle, remarkAttentionBlock], rehypePlugins: [[rehypeMomiji, { excludeLangs: ['mermaid'] }], rehypeMermaid, rehypeAttentionBlock], }) ],