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格式文件并渲染


导入md文件时必须加?raw,配置完成后重新启动一下开发服务即可!!!

你可能感兴趣的:(uni-app)