uniapp工程中解析markdown文件

news2025/3/20 18:56:54

在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.coloradmin.cn/o/2318533.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构:二叉树(一)·(重点)

前言 什么树&#xff1f;what&#xff1f; 树的概念与结构 概念&#xff1a; 树是⼀种⾮线性的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09; 个有限结点组成⼀个具有层次关系的集合。 结构&#xff1a; 有⼀个特殊的结点&#xff0c;称为根结点&#…

DevEco Studio的使用

目录 1.创建ArkTS工程 2.ArkTS工程目录结构&#xff08;Stage模型&#xff09; 构建第一个页面 构建第二个页面 实现页面间的跳转 1.创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择…

数据开发岗笔试题>>sql(hive) ,excel [2025]

sql SELECT user_id, AVG(loan_amount) AS avg_loan_amount FROM loan GROUP BY user_id HAVING AVG(loan_amount) > 20000; 授信表&#xff1a;credit 字段包含user_id(用户id)&#xff0c;credit_id(授信id)&#xff0c;credit_time(授信时间yyyy-MM-dd HH:mm:ss)&#x…

OpenGL ES 入门指南:从基础到实战

引言&#xff1a;为什么需要 OpenGL ES&#xff1f; 在当今的嵌入式设备&#xff08;如智能手机、汽车仪表盘、智能家居中控屏&#xff09;中&#xff0c;流畅的图形渲染能力是用户体验的核心。OpenGL ES&#xff08;OpenGL for Embedded Systems&#xff09; 作为行业标准&am…

docker安装milvus向量数据库Attu可视化界面

Docker 部署 Milvus 及 Attu 可视化工具完整指南 一、环境准备 安装 Docker 及 Docker Compose Docker 版本需 ≥20.10.12Docker Compose 版本需 ≥2.20.0&#xff08;推荐 V2&#xff09; 验证 Docker 环境 docker --version && docker-compose --version若出现&…

ArcGIS10. 8简介与安装,附下载地址

目录 ArcGIS10.8 1. 概述 2. 组成与功能 3. 10.8 特性 下载链接 安装步骤 1. 安装准备 2. 具体步骤 3.补丁 其他版本安装 ArcGIS10.8 1. 概述 ArcGIS 10.8 是由美国 Esri 公司精心研发的一款功能强大的地理信息系统&#xff08;GIS&#xff09;平台。其核心功能在于…

Idea中使用Git插件_合并当前分支到master分支_冲突解决_很简单---Git工作笔记005

由于之前用svn习惯了,用的git少,其实在idea中使用git,解决冲突,合并分支,非常的简单,一起来看一下吧. 一定要注意操作之前,一定要确保自己的分支代码,都已经commit提交了,并且push到远程了. 不要丢东西. 可以看到首先,在idea的左下角有个 git,点开以后 可以看到有显示的分支…

【Linux】应用层自定义协议 + 序列化和反序列化

应用层自定义协议 序列化和反序列化 一.应用层1.再谈 "协议"2.序列化 和 反序列化 二. Jsoncpp1.序列化2.反序列化 三. Tcp全双工 面向字节流四.自定义协议 保证报文的完整性1.Makefile2.Mutex.hpp3.Cond.hpp4.Log.hpp5.Thread.hpp6.ThreadPool.hpp7.Common.hpp8.…

Matlab 雷达导引头伺服系统的建模与仿真研究

1、内容简介 Matlab 177-雷达导引头伺服系统的建模与仿真研究 可以交流、咨询、答疑 2、内容说明 略[摘 要]基于 Malah/Simuink 雷达导引|头同服系统的建模与仿真&#xff0c;首先对雷达导引头同服系统按照预定回路和跟踪回路的步骤分别进行建模以及相关控制参数计算,接着构建…

华为ipd流程华为流程体系管理华为数字化转型流程数字化管理解决方案介绍81页精品PPT

华为流程体系最佳实践主要包括构建完善的流程框架&#xff0c;明确各层级流程要素与职责&#xff0c;梳理涵盖研发、采购、营销、服务、资产管理等多领域的流程&#xff0c;通过梳理业务场景和核心能力搭建差异化流程框架&#xff0c;采用自上而下与自下而上相结合的建模方法&a…

网络流基本概念及实现算法

基本概念 流网络 对于一个有向图, 抽象成水管里的水的模型, 每根管子有容量限制, 计为 G ( V , E ) G (V, E) G(V,E), 首先不考虑反向边 对于任意无向图, 都可以将反向边转化为上述形式 如果一条边不存在, 定义为容量为 0 0 0, 形式上来说就是 c ( u , v ) 0 c(u, v) 0 c(…

SpringBoot对接DeepSeek

文章目录 Spring Boot 集成 DeepSeek API 详细步骤1. 创建API Key1.访问 [DeepSeek控制台](https://platform.deepseek.com/usage) 并登录。2.点击 Create API Key 生成新密钥。3.复制并保存密钥&#xff08;需在Spring Boot配置文件中使用&#xff09;。 2. 创建Spring Boot工…

大语言模型的多垂类快速评估与 A/B 测试

简介 行业领先的模型构建企业携手澳鹏&#xff08;Appen&#xff09;开展了一项极具挑战性的项目。针对 3 至 6 个大型语言模型&#xff08;LLM&#xff09;&#xff0c;在广泛的通用领域及复杂专业领域&#xff08;如医疗保健、法律、金融、编程、数学和汽车行业等&#xff0…

RAGFlow + LlamaIndex 本地知识库RAG增强架构与实现直播智能复盘

一、需求分析与架构设计 基于 RAGFlow LlamaIndex 本地知识库RAG 扩展直播话术合规与复盘系统&#xff0c;需构建 实时流处理、多模态合规引擎、智能复盘分析 三层能力。以下是完整架构图与技术方案&#xff1a; 二、核心模块技术方案 1. 直播流实时处理&#xff08;输入层→…

阿里云平台服务器操作以及发布静态项目

目录&#xff1a; 1、云服务器介绍2、云服务器界面3、发布静态项目1、启动nginx2、ngixn访问3、外网访问测试4、拷贝静态资源到nginx目录下并重启nginx 1、云服务器介绍 2、云服务器界面 实例详情&#xff1a;里面主要显示云服务的内外网地址以及一些启动/停止的操作。监控&…

【大模型实战篇】使用GPTQ量化QwQ-32B微调后的推理模型

1. 量化背景 之所以做量化&#xff0c;就是希望在现有的硬件条件下&#xff0c;提升性能。量化能将模型权重从高精度&#xff08;如FP32&#xff09;转换为低精度&#xff08;如INT8/FP16&#xff09;&#xff0c;内存占用可减少50%~75%。低精度运算&#xff08;如INT8&#xf…

基于springboot医疗平台系统(源码+lw+部署文档+讲解),源码可白嫖!

摘要 信息化时代&#xff0c;各行各业都以网络为基础飞速发展&#xff0c;而医疗服务行业的发展却进展缓慢&#xff0c;传统的医疗服务行业已经逐渐不满足民众的需求&#xff0c;有些还在以线下预约挂号的方式接待病人&#xff0c;为此设计一个医疗平台系统很有必要。此类系统…

Stable Diffusion lora训练(一)

一、不同维度的LoRA训练步数建议 2D风格训练 数据规模&#xff1a;建议20-50张高质量图片&#xff08;分辨率≥10241024&#xff09;&#xff0c;覆盖多角度、多表情的平面风格。步数范围&#xff1a;总步数控制在1000-2000步&#xff0c;公式为 总步数 Repeat Image Epoch …

网络空间安全(37)获取webshell方法总结

一、直接上传获取Webshell 这是最常见且直接的方法&#xff0c;利用网站对上传文件的过滤不严或存在漏洞&#xff0c;直接上传Webshell文件。 常见场景&#xff1a; 许多PHP和JSP程序存在此类漏洞。例如&#xff0c;一些论坛系统允许用户上传头像或心情图标&#xff0c;攻击者可…

第十三次CCF-CSP认证(含C++源码)

第十三次CCF-CSP认证 跳一跳满分题解 碰撞的小球满分题解遇到的问题 棋局评估满分题解 跳一跳 题目链接 满分题解 没什么好说的 基本思路就是如何用代码翻译题目所给的一些限制&#xff0c;以及变量应该如何更新&#xff0c;没像往常一样给一个n&#xff0c;怎么读入数据&…