azat-io / vuepress-plugin-mermaid-wrapper

📗 VuePress v2 plugin provides a global component wrapping Mermaid
MIT License
1 stars 0 forks source link

meimaid代码块没有渲染为图片 #2

Open aoleou opened 7 months ago

aoleou commented 7 months ago

大佬, 您好,感谢开源这个有用的工具。

通过以下操作, mermaid代码块没有渲染为图片, 大佬, 麻烦有空帮忙看一下哈

我的操作复现方式:

mkdir vuepress-starter
cd vuepress-starter
git init
pnpm init
pnpm add -D vuepress@next @vuepress/client@next vue
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
mkdir docs
echo '# Hello VuePress' > docs/README.md
pnpm install -D vuepress-plugin-mermaid-wrapper

项目结构如下所示:

image

然后在 vuepress-starter的 .vuepress 文件夹下的config.ts文件中增加以下内容

import { mermaidWrapperPlugin } from 'vuepress-plugin-mermaid-wrapper'

export default {
  plugins: [
    mermaidWrapperPlugin({
      /* options */
    }),
  ],
}

填写一篇测试文档: image

然后启动服务:

pnpm run docs:dev

期望的显示图片应该是这样的:

image

但是, 现实是残酷的, 结果显示的效果是 : image

这个问题有点难, 麻烦大佬, 有空帮忙看一下