vue-markdown-it

### 如何将 Vue 与 markdown-it 集成 Vue 是一种流行的前端框架，而 `markdown-it` 则是一个强大的 Markdown 解析器库。两者可以很好地协同工作，用于动态渲染 Markdown 内容。以下是关于如何集成 Vue 和 `markdown-it` 的详细说明以及一些示例。 #### 安装依赖项 为了实现 Vue 和 `markdown-it` 的集成，首先需要安装必要的包： ```bash npm install vue markdown-it ``` 如果计划使用更高级的功能（如语法高亮），还可以额外安装插件： ```bash npm install markdown-it-prism ``` --- #### 创建组件并初始化 markdown-it 实例 可以通过创建一个自定义的 Vue 组件来封装 `markdown-it` 功能。以下是一个简单的例子： ```javascript // MyMarkdownComponent.vue <template> <div v-html="compiledHtml"></div> </template> <script> import { ref, computed } from 'vue'; import MarkdownIt from 'markdown-it'; export default { props: { source: { type: String, required: true } }, setup(props) { const md = new MarkdownIt({ html: true, linkify: true, typographer: true }); // 使用 Prism 插件作为可选项 try { require('markdown-it-prism'); md.use(require('markdown-it-prism')); } catch (e) {} const compiledHtml = computed(() => { return md.render(props.source); }); return { compiledHtml }; } }; </script> ``` 上述代码展示了如何通过 `props` 接收原始 Markdown 文本，并将其转换为 HTML 渲染到页面上[^1]。 --- #### 在项目中使用该组件 一旦完成了组件开发，就可以轻松地在其他地方重用它。例如，在父级组件中这样调用： ```html <MyMarkdownComponent :source="content" /> ``` 其中 `content` 可能是从 API 或本地状态管理工具获取的一段 Markdown 字符串。 --- #### 处理安全性问题 需要注意的是，当使用 `v-html` 将外部数据注入 DOM 中时可能存在 XSS 攻击风险。因此建议启用 `sanitize` 参数或者手动过滤掉潜在危险标签和属性[^2]。 修改后的配置如下所示： ```javascript const md = new MarkdownIt({ html: false, // 不允许嵌入HTML片段 xhtmlOut: true, breaks: true, langPrefix: 'language-', linkify: true, typographer: true, quotes: '“”‘’' }); md.renderer.rules.fence = function(tokens, idx, options, env, self){ let token = tokens[idx]; if(token.info === 'js'){ return '<pre><code class="' + token.info.trim() + '">' + escapeHtml(self.highlight ? self.highlight(token.content, token.info.replace(/\s.*/, '')) : token.content ) + '</code></code>'; } return self.renderToken(tokens,idx,options); } function escapeHtml(html){ return html.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); } ``` 此部分逻辑确保即使输入包含恶意脚本也不会被执行[^3]。 --- ### 性能优化提示 对于大型应用而言，频繁重新计算 Markdown 转换可能会带来性能开销。为此推荐采用缓存机制减少不必要的重复操作次数；另外也可以考虑按需加载资源文件以降低初始体积大小影响用户体验效果等问题解决方案。 ---