使用pnpm安装marked库
pnpm i marked
在js中导入
import { marked } from "marked";
准备数据,进行测试
数据准备
const data = `### 🚀 核心成就：Vue.js 的诞生与演进
- **轻量化初心**：Vue 最初源于尤雨溪的个人项目，旨在解决 Angular 等框架的复杂性问题，以 “渐进式框架” 为定位，让开发者可按需引入功能。
- **技术创新**：首创 “响应式数据绑定” 与 “组件化开发” 的简洁实现，降低前端开发门槛，兼顾易用性与性能。
- **生态构建**：主导开发 Vue Router、Vuex、Vue CLI 等核心工具，形成完整生态，支持从小型应用到大型项目的全场景开发。`;
const content = marked.parse(data);
通过v-html将content渲染到界面中
<div class="content" v-html="content"></div>
查看效果
🚀 核心成就：Vue.js 的诞生与演进
-
轻量化初心：Vue 最初源于尤雨溪的个人项目，旨在解决 Angular 等框架的复杂性问题，以 “渐进式框架” 为定位，让开发者可按需引入功能。
-
技术创新：首创 “响应式数据绑定” 与 “组件化开发” 的简洁实现，降低前端开发门槛，兼顾易用性与性能。
-
生态构建：主导开发 Vue Router、Vuex、Vue CLI 等核心工具，形成完整生态，支持从小型应用到大型项目的全场景开发。
注意:
marked的文档中警告: 🚨 Marked does not sanitize the output HTML. If you are processing potentially unsafe strings, it's important to filter for possible XSS attacks. Some filtering options include DOMPurify (recommended), js-xss, sanitize-html and insane on the output HTML! 🚨 (防止xss注入,与其他负责过滤的库搭配使用)
这里以DOMPurify为例:
DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not happening')">`));
