uniapp如何使用markdown-it解析Markdown内容

在uniapp中如何使用markdown-it来解析Markdown内容？我已经安装了markdown-it插件，但在uniapp中引入和使用时遇到了问题，不知道该如何正确配置。希望能提供一个具体的示例代码，包括如何引入markdown-it、设置解析选项以及在页面中渲染解析后的HTML内容。另外，在uniapp中使用markdown-it是否有需要特别注意的地方？

2 回复

在uniapp中，先安装markdown-it：npm install markdown-it。然后在页面中引入：import MarkdownIt from 'markdown-it'。创建实例并解析：const md = new MarkdownIt(); let html = md.render('# 标题')。最后用v-html绑定到页面即可显示。


在uni-app中使用markdown-it解析Markdown内容，可以按照以下步骤操作：

1. 安装markdown-it

npm install markdown-it

2. 在uni-app页面中使用

<template>
  <view class="container">
    <view class="content" v-html="htmlContent"></view>
  </view>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data() {
    return {
      htmlContent: ''
    }
  },
  onLoad() {
    this.parseMarkdown()
  },
  methods: {
    parseMarkdown() {
      // 创建markdown-it实例
      const md = new MarkdownIt()
      
      // Markdown文本
      const markdownText = `# 标题
      
这是**粗体**文本和*斜体*文本。

- 列表项1
- 列表项2

[链接](https://example.com)`
      
      // 解析为HTML
      this.htmlContent = md.render(markdownText)
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.content {
  line-height: 1.6;
}
</style>

3. 高级配置选项

// 启用更多功能
const md = new MarkdownIt({
  html: true,         // 允许HTML标签
  linkify: true,      // 自动转换URL为链接
  typographer: true,  // 启用排版优化
  breaks: true        // 将换行符转换为<br>
})

4. 安全注意事项

如果需要渲染用户输入的Markdown，建议进行XSS防护：

import MarkdownIt from 'markdown-it'
import DOMPurify from 'dompurify' // 需要额外安装

const md = new MarkdownIt()
const rawHtml = md.render(userInput)
this.htmlContent = DOMPurify.sanitize(rawHtml)

注意事项：

  • 使用v-html渲染HTML内容时，注意样式兼容性
  • 在App端，某些HTML标签可能受限
  • 建议在onLoad或created生命周期中初始化解析器

这样就能够在uni-app中成功解析和显示Markdown内容了。

回到顶部