当前位置: 首页 > article >正文

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,配置完成后重新启动一下开发服务即可!!!


http://www.kler.cn/a/592614.html

相关文章:

  • 【OpenCV C++】如何快速 高效的计算出图像中大于值的像素个数? 遍历比较吗? No,效率太低!那么如何更高效?
  • 设计模式之单例模式(Singleton Pattern)
  • 性能测试过程实时监控分析
  • 卷积神经网络 - 整体结构
  • WebSocket:开启实时通信的新篇章
  • OpenManus-RL 通过强化学习(RL)提升大型语言模型(LLM)代理的推理和决策能力
  • SpringCloud网关:Gateway路由配置与过滤器链
  • gitee AI使用
  • 人工智能混合编程实践:C++调用Python AgentOCR进行文本识别
  • Rust嵌入式开发之:Probe-rs工具安装
  • MySQL进阶篇-InnoDB引擎(逻辑存储结构、内存结构、磁盘结构、后台线程、事务原理、MVCC)
  • 使用springboot与vue开发头像功能
  • 优化器/模型参数/超参数
  • 【Java篇】一气化三清:类的实例化与封装的智慧之道
  • 【深度学习】走向VQ-VAE模型
  • 【Python】使用ImageEnhance提升图片画质
  • windows 10 系统配置Node
  • 使用htool工具导出和导入Excel表
  • AI 原生 IDE Trae 深度体验:SSHremote 功能如何重新定义远程开发与云原生部署
  • 基于Python+Django的旅游管理系统