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

相关文章:

  • 在 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的管理流程】
  • 商务部回应美方加严限制中国芯片:敦促美方立即纠正错误做法
  • 秘鲁总统任命前司法部长阿拉纳为新总理
  • 125%→10%、24%税率暂停90天,对美关税开始调整
  • 远如《月球背面》,近似你我内心
  • 彭丽媛同巴西总统夫人罗桑热拉参观中国国家大剧院
  • 河南信阳拟发文严控预售许可条件:新出让土地开发的商品房一律现房销售