更新记录

1.0.0（2025-05-14） 下载此版本

初次发版

平台兼容性

uni-app

其他

Markdown2Html 组件使用说明

Markdown2Html 是一个用于将 Markdown 文本转换为 HTML 并渲染的组件。

安装依赖

使用前需要安装以下依赖：

npm install marked --save

正确导入方式

// 正确的导入方式
import { marked } from "marked"

组件属性

基本用法

<template>
  <view>
    <Markdown2Html :markdown="markdownText"></Markdown2Html>
  </view>
</template>

<script setup>
import { ref } from "vue"
import Markdown2Html from "@/components/malq-Markdown2Html/index.vue"

const markdownText = ref(`
# 标题1
## 标题2

这是一段**加粗**的文本，这是*斜体*文本。

- 列表项1
- 列表项2
- 列表项3

[链接文本](https://example.com)

\`\`\`javascript
// 代码块
function hello() {
  console.log('Hello World');
}
\`\`\`

> 这是一段引用文本
`)
</script>

动态更新内容

<template>
  <view>
    <textarea v-model="inputText" placeholder="请输入Markdown文本"></textarea>
    <Markdown2Html :markdown="inputText"></Markdown2Html>
  </view>
</template>

<script setup>
import { ref } from "vue"
import Markdown2Html from "@/components/malq-Markdown2Html/index.vue"

const inputText = ref("")
</script>

使用组件方法

组件暴露了 convert 方法，可以直接调用转换功能：

<template>
  <view>
    <button @click="convertAndShow">转换并显示</button>
    <view v-html="htmlResult"></view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import Markdown2Html from "@/components/malq-Markdown2Html/index.vue"

const markdown2HtmlRef = ref(null)
const htmlResult = ref("")

const convertAndShow = () => {
  const markdown = "# 这是通过方法转换的"
  htmlResult.value = markdown2HtmlRef.value.convert(markdown)
}
</script>

处理图片路径

当使用相对路径的图片时，可以设置 baseUrl 属性：

<template>
  <Markdown2Html
    :markdown="markdownWithImages"
    baseUrl="https://example.com/images/"
  ></Markdown2Html>
</template>

<script setup>
import Markdown2Html from "@/components/malq-Markdown2Html/index.vue"

const markdownWithImages = `
# 带图片的文档

![图片描述](image.jpg)
`
// 图片会被转换为 https://example.com/images/image.jpg
</script>

常见问题

requestAnimationFrame 重复声明错误

如果遇到以下错误：

SyntaxError: Identifier 'requestAnimationFrame' has already been declared

这是因为highlight.js库可能与uniapp环境中已有的requestAnimationFrame定义冲突。解决方法：

1. 本组件已移除highlight.js的依赖，使用简化的代码高亮处理
2. 如果需要代码高亮，可以使用CSS自定义样式实现基本的高亮效果

注意事项

1. 组件使用 v-html 渲染转换后的 HTML，请确保输入的 Markdown 内容可信，以避免 XSS 攻击
2. 组件已配置基本样式，可根据需要进行自定义
3. 小程序端不支持hr标签选择器，已使用class选择器替代