首页vue3 渲染 Markdown 文本

vue3 渲染 Markdown 文本

时间: 2025-04-16 19:45:41 浏览: 56

### 实现 Vue3 中渲染 Markdown 文本为了在 Vue3 项目中实现渲染 Markdown 文本的功能，可以采用 `markdown-it` 库来完成这一目标。安装该库可以通过 npm 进行： ```bash npm install markdown-it --save ``` 随后，在组件内部引入并初始化 `markdown-it` 对象用于转换 Markdown 字符串为 HTML。 #### 组件模板部分通过 `<template>` 标签定义视图结构，并利用 `v-html` 指令绑定经过处理后的 HTML 内容到 DOM 节点上[^1]。 ```html <template> <div v-html="renderedContent"></div> </template> ``` #### JavaScript 部分创建一个新的 `MarkdownIt` 实例，并将其赋给变量以便后续调用其方法来进行 Markdown 到 HTML 的编译工作；接着设置响应式的属性存储最终要显示的内容字符串以及对应的 getter 方法返回已编译的结果。 ```javascript <script setup> import { ref, computed } from 'vue'; import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const sourceContent = ref('# Hello World'); const renderedContent = computed(() => md.render(sourceContent.value)); </script> ``` 这样就完成了基本的 Markdown 解析与展示功能。对于更复杂的场景比如自定义语法高亮插件等，则可以根据需求进一步扩展配置项或集成其他第三方工具包。

阅读全文