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

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.dtcms.com/a/77391.html

相关文章:

  • 在 JIT 编译的函数中调用非 JAX 函数
  • OpenAI Agents SDK 使用自定义的 OpenAI-Compatible API
  • 将对象内的键值转换为响应式变量后,在setup函数中用这些属性的时候为什么不用像ref那样加value
  • 冯・诺依曼架构深度解析
  • WPF-实现按钮的动态变化
  • OMRON Corporation Programming Contest 2025 (AtCoder Beginner Contest 397)题解
  • 对接豆包大模型
  • SvelteKit 最新中文文档教程(6)—— 状态管理
  • 【微服务】基于Lambda ESM的预留模式调整Kafka ESM吞吐量的实战
  • 【海螺AI视频】蓝耘智算 | AI视频新浪潮:蓝耘MaaS与海螺AI视频创作体验
  • leetcode33.搜索旋转排序数组-medium
  • 【八股文】volatile关键字的底层原理是什么
  • 实现搜索功能:第一部分
  • 穿越是时空之门(java)
  • Ubuntu安装TensorFlow 2.13-GPU版全流程指南(anaconda)
  • golang中的接口
  • 【Java进阶学习 第九篇】常用API(Array、冒泡选择排序、二分查找、正则表达式)
  • 【C++进阶】指针:从基础到实践
  • Leetcode Hot 100 79.单词搜索
  • 【spring对bean Singleton和Prototype的管理流程】
  • 英伟达GTC 2025大会产品全景剖析与未来路线深度洞察分析
  • 小程序开发中的安全问题及防护措施
  • 蓝桥与力扣刷题(蓝桥 组队)
  • E1-相亲派对(组合)
  • 【AI News | 20250319】每日AI进展
  • @Resource和@Autowire
  • Java 中 LinkedList 的底层数据结构及相关分析
  • 【源码阅读】多个函数抽象为类(实现各种类型文件转为PDF)
  • UE4学习笔记 FPS游戏制作6 添加枪口特效
  • 详细解析GetOpenFileName()