uniapp markdown插件如何使用

在uniapp中如何正确使用markdown插件？我在项目中引入了插件但无法正常渲染内容，请问需要做什么特殊配置吗？能否提供一个完整的示例代码？插件是否支持实时预览功能？

2 回复

推荐使用mp-html插件。在HBuilder X中安装插件后，在页面引入组件：

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

<script>
export default {
  data() {
    return {
      markdownText: '# 标题\n这是内容'
    }
  }
}
</script>

支持解析大部分Markdown语法，简单易用。


在 UniApp 中使用 Markdown 插件，推荐使用第三方库如 marked 或 mp-html（支持富文本和 Markdown 渲染）。以下是使用 mp-html 的步骤：

1. 安装插件

通过 npm 安装：

npm install mp-html

2. 引入组件

在 pages.json 中全局注册组件：

{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

3. 在页面中使用

在 Vue 文件中：

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

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

4. 高级配置（可选）

  • 支持懒加载：添加 lazy-load 属性。
  • 自定义样式：通过 CSS 修改组件样式。
  • 支持视频/表格：检查插件文档启用相关功能。

注意事项

  • 确保 HBuilderX 配置支持 npm。
  • 测试多端兼容性（微信小程序、H5 等）。

通过以上步骤即可在 UniApp 中渲染 Markdown 内容。

回到顶部