uniapp如何使用mp-html解析md格式文本

[cshuting]

问题描述

使用pnpm命令行创建的uniapp+vue3+vite项目怎么使用mp-html解析md格式文本

使用步骤

• 下载源码
• 按需打开注释 tools/config
• npm run build:uni-app生成组件包
• 复制\mp-html\dist\uni-app\components\mp-html生成的组件包放到项目根目录下的components
• 运行项目

使用demo

<template>
    <view class="container">
        <view class="title">下面是 mp-html 的渲染区域：</view>
        <view class="divider"></view>

        <!-- 我们只测试这一个组件，不加任何多余的class和包裹层 -->
        <MpHtml :content="markdownString" :markdown="true" />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MpHtml from '@/components/mp-html/mp-html.vue';

// 使用一个最简单的、绝对不会出错的 Markdown 字符串来测试
const markdownString = ref(`
# 这是一级标题

**这是加粗的文字**

- 列表项 1
- 列表项 2

\`\`\`javascript
function hello() {
console.log("Hello, World!");
}
\`\`\`
  `);
</script>

<style>
.container {
    padding: 20px;
}
.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.divider {
    height: 1px;
    background-color: #eee;
    margin: 15px 0;
}
</style>