vue3 markdown 展示表格

### 如何在 Vue3 中渲染 Markdown 表格 要在 Vue3 中渲染 Markdown 表格，可以利用现有的库来实现这一功能。通过这些工具，不仅可以将 Markdown 转换为 HTML，还可以支持复杂的语法结构，比如表格。 以下是具体方法： #### 使用 `marked` 和 `highlight.js` 可以通过引入 `marked` 库以及代码高亮库 `highlight.js` 来完成 Markdown 的解析和渲染工作[^1]。下面是一个完整的例子： ```javascript <template> <div v-html="renderedHtml"></div> </template> <script> import marked from 'marked'; import hljs from 'highlight.js'; // 导入 highlight.js 进行代码高亮 import 'highlight.js/styles/github.css'; // 可选样式主题 export default { data() { return { markdownContent: ` | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | `, }; }, computed: { renderedHtml() { const renderer = new marked.Renderer(); // 设置代码块的处理逻辑 renderer.code = (code, lang) => { if (lang && hljs.getLanguage(lang)) { try { return `<pre><code class="${lang}">${hljs.highlight(code, { language: lang }).value}</code></pre>`; } catch (err) {} } return `<pre><code>${marked.escape(code)}</code></pre>`; }; // 配置选项并启用 tables 扩展 marked.setOptions({ renderer, highlight: function(code, lang) { return hljs.highlightAuto(code).value; }, breaks: true, pedantic: false, gfm: true, tables: true // 启用表格扩展 }); return marked(this.markdownContent); } } }; </script> ``` 上述代码展示了如何配置 `marked` 并将其用于解析包含表格在内的 Markdown 数据。注意，在设置选项时启用了 `tables` 参数以支持表格语法。 --- #### 使用 `vue-markdown-it-component` 如果希望更简单的方式，则可以选择基于 Vue 组件封装好的解决方案——例如 `vue-markdown-it-component` 或者其他类似的插件[^2]。这种方式无需手动编写太多逻辑即可快速集成到项目中。 示例如下所示： ```html <template> <div> <!-- 渲染 Markdown --> <VueMarkdownItComponent :source="markdownTable" /> </div> </template> <script> // 安装 vue-markdown-it-component 插件后导入它 import VueMarkdownItComponent from 'vue-markdown-it-component'; export default { components: { VueMarkdownItComponent }, data() { return { markdownTable: ` | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | ` }; } }; </script> ``` 此方式更加简洁明了，适合初学者或者不需要高度自定义场景下的开发需求。 --- #### 注意事项 无论采用哪种方案，请务必确认所使用的第三方依赖版本兼容当前项目的框架环境（即 Vue3）。部分旧版可能仅适用于 Vue2，因此需仔细阅读文档说明或查看其 npm 页面上的标签信息。 ---