uniapp markdown的使用方法

“在uniapp中如何使用markdown？有没有推荐的插件或组件？希望能支持基本的标题、列表、代码块等格式渲染，最好能提供简单的示例代码。”

2 回复

在uniapp中使用markdown，可以通过安装插件如marked和highlight.js实现。步骤：1. 安装依赖；2. 引入并配置；3. 将markdown内容转为html显示。注意样式适配和代码高亮。


在 UniApp 中使用 Markdown 主要有两种方法：使用第三方插件或手动解析。以下是具体步骤和代码示例：

方法一：使用第三方插件（推荐）

  1. 安装插件：
    使用 mp-html 插件（支持 Markdown 和富文本）。通过 npm 安装：

    npm install mp-html

  2. 在页面中引入：

    <template>
  <view>
    <mp-html :content="markdownText" />
  </view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

export default {
  components: {
    mpHtml
  },
  data() {
    return {
      markdownText: '# 标题\n这是一段 **加粗** 的文本。'
    }
  }
}
</script>

  3. 配置：
    如果需要自定义样式或扩展功能，参考 mp-html 官方文档调整参数。

方法二：手动解析（适用于简单内容）

  1. 安装 Markdown 解析库（如 marked）：

    npm install marked

  2. 在页面中解析并渲染：

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

<script>
import marked from 'marked';

export default {
  data() {
    return {
      htmlContent: ''
    }
  },
  mounted() {
    const markdown = '# 你好，UniApp！';
    this.htmlContent = marked(markdown);
  }
}
</script>

注意事项：

  • 使用 rich-text 组件时，需注意部分 HTML 标签在 UniApp 中可能受限。
  • 插件方式更稳定，支持表格、代码高亮等复杂 Markdown 语法。
  • 确保测试各平台兼容性（微信小程序、H5 等）。

通过以上方法，即可在 UniApp 中高效渲染 Markdown 内容。

回到顶部