uniapp marked如何使用

在uniapp中如何使用marked库来解析Markdown内容？我在项目中引入了marked，但在编译时总是报错，不知道是不是配置有问题。请问正确的引入方式和基本用法是什么样的？需要额外配置webpack吗？

2 回复

在uniapp中，先安装marked库：npm install marked。然后在页面引入：import marked from 'marked'。使用marked(text)将markdown文本转为HTML，再通过v-html渲染即可。


在 UniApp 中使用 marked 库解析 Markdown 内容，需先安装并引入该库。以下是具体步骤：

1. 安装 marked

在项目根目录执行：

npm install marked

2. 引入 marked

在需要使用的页面或组件中：

import marked from 'marked';

3. 基本使用示例

export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  methods: {
    parseMarkdown(mdText) {
      this.htmlContent = marked(mdText);
    }
  },
  onLoad() {
    const md = '# Hello Marked!\n这是一段**加粗**文本。';
    this.parseMarkdown(md);
  }
}

4. 在模板中渲染

<template>
  <view>
    <rich-text :nodes="htmlContent"></rich-text>
  </view>
</template>

5. 安全注意事项

如果需要防止 XSS 攻击，建议配合 DOMPurify：

npm install dompurify

import DOMPurify from 'dompurify';
this.htmlContent = DOMPurify.sanitize(marked(mdText));

6. 自定义配置

marked.setOptions({
  breaks: true,     // 转换换行符为 <br>
  sanitize: false   // 禁用内置消毒（推荐使用 DOMPurify）
});

注意事项：

  • 使用 rich-text 组件渲染 HTML 内容
  • 部分 CSS 样式可能需要手动调整
  • 复杂表格或特殊语法可能需要额外处理

这样即可在 UniApp 中实现 Markdown 内容的解析和展示。

回到顶部