uniapp工程中解析markdown文件
在uniapp中如何导入markdown文件,同时在页面中解析成html,请参考以下配置:
1. 安装以下3个依赖包
npm install marked highlight.js vite-plugin-markdown
2. 创建vite.config.js配置文件
// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { plugin as mdPlugin } from 'vite-plugin-markdown';
export default defineConfig({
plugins: [
uni(),
mdPlugin({
mode: 'html', // 将 .md 转换为 HTML 字符串
markdown: (body) => {
// 自定义解析逻辑(如代码高亮)
const marked = require('marked');
const hljs = require('highlight.js');
marked.setOptions({
highlight: (code) => hljs.highlightAuto(code).value
});
return marked.parse(body);
}
})
],
assetsInclude: ['**/*.md'] // 声明 .md 为静态资源
});
3. 在dCloud插件市场安装以下uniapp markdown语法渲染及代码高亮 - DCloud 插件市场
4. 在工程页面中引入markdown格式文件并渲染
<template>
<view class="container">
<ua-markdown :source="Example1" show-line="false" />
</view>
</template>
<script setup>
// 导入 .md 文件(需配置 ?raw 后缀)
import Example1 from './customer.md?raw'
</script>
导入md文件时必须加?raw,配置完成后重新启动一下开发服务即可!!!