From c7513a05c884ea429e6c5bf7e513b28a4740c31d Mon Sep 17 00:00:00 2001 From: riiim400th Date: Mon, 29 Dec 2025 16:08:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20mermaid=E5=AF=BE?= =?UTF-8?q?=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- astro.config.mjs | 3 + package.json | 3 +- pnpm-lock.yaml | 13 +-- .../remark/remark-mermaid-injector.mjs | 88 +++++++++++++++++++ 4 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 src/plugins/remark/remark-mermaid-injector.mjs diff --git a/astro.config.mjs b/astro.config.mjs index 74e6638..93460fe 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,6 +6,7 @@ import partytown from '@astrojs/partytown'; import rehypeToc from 'rehype-toc'; import rehypeSlug from 'rehype-slug'; import remarkLinkCard from 'remark-link-card-plus'; +import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs'; // https://astro.build/config export default defineConfig({ @@ -26,8 +27,10 @@ export default defineConfig({ }), ], markdown: { + excludeLangs: ['mermaid'], rehypePlugins: [rehypeSlug, [rehypeToc, { headings: ['h2', 'h3', 'h4'] }]], remarkPlugins: [ + remarkMermaidInjector, [ remarkLinkCard, { cache: false, shortenUrl: true, thumbnailPosition: 'left' }, diff --git a/package.json b/package.json index 26696a9..e632eb1 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ "prettier": "^3.2.5", "prettier-plugin-astro": "^0.13.0", "prettier-plugin-tailwindcss": "^0.6.11", - "sass": "^1.77.4" + "sass": "^1.77.4", + "unist-util-visit": "^5.0.0" }, "pnpm": { "overrides": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 348aad8..b85ad18 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: sass: specifier: ^1.77.4 version: 1.89.0 + unist-util-visit: + specifier: ^5.0.0 + version: 5.0.0 packages: @@ -3073,9 +3076,6 @@ packages: unist-util-visit-children@3.0.0: resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} - unist-util-visit-parents@6.0.1: - resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} - unist-util-visit-parents@6.0.2: resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==} @@ -6833,11 +6833,6 @@ snapshots: dependencies: '@types/unist': 3.0.3 - unist-util-visit-parents@6.0.1: - dependencies: - '@types/unist': 3.0.3 - unist-util-is: 6.0.0 - unist-util-visit-parents@6.0.2: dependencies: '@types/unist': 3.0.3 @@ -6847,7 +6842,7 @@ snapshots: dependencies: '@types/unist': 3.0.3 unist-util-is: 6.0.0 - unist-util-visit-parents: 6.0.1 + unist-util-visit-parents: 6.0.2 unstorage@1.17.3: dependencies: diff --git a/src/plugins/remark/remark-mermaid-injector.mjs b/src/plugins/remark/remark-mermaid-injector.mjs new file mode 100644 index 0000000..042e6fc --- /dev/null +++ b/src/plugins/remark/remark-mermaid-injector.mjs @@ -0,0 +1,88 @@ +import { visit } from 'unist-util-visit'; + +/** + * remark プラグイン + * + * markdown ASTにてmermaidコードブロックがある場合、クライアントでの描画スクリプト(mermaid.js処理)を末尾に挿入 + * + */ +export function remarkMermaidInjector() { + return function (tree) { + let mermaidFound = false; + + // mermaidコードブロックの存在を確認 + visit(tree, 'code', node => { + if (node.lang === 'mermaid') { + mermaidFound = true; + return false; + } + }); + + // mermaidブロックがある場合、末尾にスクリプトを追加 + if (mermaidFound) { + const scriptNode = { + type: 'html', + value: ``, + }; + + tree.children.push(scriptNode); + } + }; +} From 321f771eebff74fdb40148a54aa6b0d8cd5cb20a Mon Sep 17 00:00:00 2001 From: riiim400th Date: Mon, 29 Dec 2025 16:31:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9E=20fix:=20latest=20mermaid.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/remark/remark-mermaid-injector.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/remark/remark-mermaid-injector.mjs b/src/plugins/remark/remark-mermaid-injector.mjs index 042e6fc..fe15b99 100644 --- a/src/plugins/remark/remark-mermaid-injector.mjs +++ b/src/plugins/remark/remark-mermaid-injector.mjs @@ -34,7 +34,7 @@ export function remarkMermaidInjector() { if (!window.mermaid) { const script = document.createElement("script"); script.src = - "https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js"; + "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"; await new Promise((resolve, reject) => { script.onload = resolve; script.onerror = reject;