markdown-it-vue 常见问题排查指南从安装、启动到渲染的修复清单【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vuemarkdown-it-vue 是基于 markdown-it 的 Vue Markdown 渲染组件库内置 mermaid、ECharts、flowchart.js、数学公式与图片预览等能力。这份指南覆盖 markdown-it-vue 常见问题的三个阶段安装与依赖、首次启动、配置与渲染。按症状对号入座跟着改就行。常见症状速查症状常见原因对应章节npm install报 ERESOLVE 依赖冲突项目在 Vue 3 下而库声明依赖 Vue 2安装报版本冲突时npm run dev提示 8080 端口被占用示例服务默认端口被其他进程占走开发服务器端口被占用时页面排版全挤在一行、无样式没引入markdown-it-vue.css渲染结果没有样式时图表区出现echarts complains: ...文本图表块里的 JSON 数据不合法图表块渲染报错时options配了不生效子项放错了层级传options不生效时安装与依赖安装报版本冲突时终端里是一大段ERESOLVE unable to resolve dependency tree里面带着conflicting peer dependency: vue。原因不复杂库的依赖声明是vue ^2.6.12在 Vue 3 工程里直接装npm 两边版本对不上。如果你的工程是 Vue 2用一条命令把 vue 锁定在 2.xnpm 就不会去挑错版本npm install vue2 markdown-it-vue已经在 Vue 3 里装上并持续报冲突的话这个库暂时帮不上你——它面向 Vue 2本文其余章节也默认 Vue 2 环境。想先跑示例看看效果示例代码在 example/ 目录从源码仓库直接起开发服务git clone https://gitcode.com/gh_mirrors/ma/markdown-it-vue cd markdown-it-vue npm install npm run dev成功后浏览器打开localhost:8080左侧 textarea 输入右侧实时渲染适合验证组件本身是否正常。首次启动开发服务器端口被占用时终端输出Port 8080 is already in use.说明 8080 被别的服务占了。与其找进程杀它不如直接把端口换掉在package.json的dev脚本里加--portdev: vue-cli-service serve --port 8081 ./example/main.js然后重新执行npm run dev访问新端口即可。配置与渲染渲染结果没有样式时页面只输出一大段纯文本没有 GitHub 风格的排版。组件样式在独立的 css 文件里不会自动注入需要在入口或组件里引入markdown-it-vue/dist/markdown-it-vue.css。用的是精简版就换成markdown-it-vue/dist/markdown-it-vue-light.css。传options不生效时典型现象写了linkify: true链接还是不会自动识别。options是一个对象每个插件的配置各有自己的键放错层级等于没传options: { markdownIt: { linkify: true }, linkAttributes: { attrs: { target: _self, rel: noopener } }, katex: { throwOnError: false, errorColor: #cc0000 } }要挂自己的插件走组件实例的use方法this.$refs.myMd.use(MyPlugin)。图表块渲染报错时图表区域出现echarts complains: ...flowchart 对应flowchart complains: ...这是组件捕获到渲染异常后把该块替换成了pre。几乎都是图表块里的 JSON 数据不合法或代码围栏语言标签写错。把 JSON 拿去校验、修正围栏语言渲染就恢复了。高亮只打包了常用语言js、python、go、rust 等列表外的语言不会高亮这不是 bug先核对 README 里的支持列表。动手前自查清单 工程是 Vue 2库声明vue ^2.6.12与 Vue 3 不兼容已引入markdown-it-vue.css精简版用对应的-light.cssoptions是对象markdownIt/katex/githubToc等子项各就各位开发端口空闲或用--port换过图表 JSON 合法打包体积吃紧时评估换精简版markdown-it-vue-light清单过完还报错把控制台第一条错误原文拿出来对照上文对应章节改。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 markdown-it-vue 常见问题排查指南：从安装、启动到渲染的修复清单
markdown-it-vue 常见问题排查指南从安装、启动到渲染的修复清单【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vuemarkdown-it-vue 是基于 markdown-it 的 Vue Markdown 渲染组件库内置 mermaid、ECharts、flowchart.js、数学公式与图片预览等能力。这份指南覆盖 markdown-it-vue 常见问题的三个阶段安装与依赖、首次启动、配置与渲染。按症状对号入座跟着改就行。常见症状速查症状常见原因对应章节npm install报 ERESOLVE 依赖冲突项目在 Vue 3 下而库声明依赖 Vue 2安装报版本冲突时npm run dev提示 8080 端口被占用示例服务默认端口被其他进程占走开发服务器端口被占用时页面排版全挤在一行、无样式没引入markdown-it-vue.css渲染结果没有样式时图表区出现echarts complains: ...文本图表块里的 JSON 数据不合法图表块渲染报错时options配了不生效子项放错了层级传options不生效时安装与依赖安装报版本冲突时终端里是一大段ERESOLVE unable to resolve dependency tree里面带着conflicting peer dependency: vue。原因不复杂库的依赖声明是vue ^2.6.12在 Vue 3 工程里直接装npm 两边版本对不上。如果你的工程是 Vue 2用一条命令把 vue 锁定在 2.xnpm 就不会去挑错版本npm install vue2 markdown-it-vue已经在 Vue 3 里装上并持续报冲突的话这个库暂时帮不上你——它面向 Vue 2本文其余章节也默认 Vue 2 环境。想先跑示例看看效果示例代码在 example/ 目录从源码仓库直接起开发服务git clone https://gitcode.com/gh_mirrors/ma/markdown-it-vue cd markdown-it-vue npm install npm run dev成功后浏览器打开localhost:8080左侧 textarea 输入右侧实时渲染适合验证组件本身是否正常。首次启动开发服务器端口被占用时终端输出Port 8080 is already in use.说明 8080 被别的服务占了。与其找进程杀它不如直接把端口换掉在package.json的dev脚本里加--portdev: vue-cli-service serve --port 8081 ./example/main.js然后重新执行npm run dev访问新端口即可。配置与渲染渲染结果没有样式时页面只输出一大段纯文本没有 GitHub 风格的排版。组件样式在独立的 css 文件里不会自动注入需要在入口或组件里引入markdown-it-vue/dist/markdown-it-vue.css。用的是精简版就换成markdown-it-vue/dist/markdown-it-vue-light.css。传options不生效时典型现象写了linkify: true链接还是不会自动识别。options是一个对象每个插件的配置各有自己的键放错层级等于没传options: { markdownIt: { linkify: true }, linkAttributes: { attrs: { target: _self, rel: noopener } }, katex: { throwOnError: false, errorColor: #cc0000 } }要挂自己的插件走组件实例的use方法this.$refs.myMd.use(MyPlugin)。图表块渲染报错时图表区域出现echarts complains: ...flowchart 对应flowchart complains: ...这是组件捕获到渲染异常后把该块替换成了pre。几乎都是图表块里的 JSON 数据不合法或代码围栏语言标签写错。把 JSON 拿去校验、修正围栏语言渲染就恢复了。高亮只打包了常用语言js、python、go、rust 等列表外的语言不会高亮这不是 bug先核对 README 里的支持列表。动手前自查清单 工程是 Vue 2库声明vue ^2.6.12与 Vue 3 不兼容已引入markdown-it-vue.css精简版用对应的-light.cssoptions是对象markdownIt/katex/githubToc等子项各就各位开发端口空闲或用--port换过图表 JSON 合法打包体积吃紧时评估换精简版markdown-it-vue-light清单过完还报错把控制台第一条错误原文拿出来对照上文对应章节改。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考