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.mzph.cn/diannao/73930.shtml

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

相关文章

sass介绍

1、Sass简介 Sass 是一种 CSS 的预编译语言。它提供了 变量&#xff08;variables&#xff09;、嵌套&#xff08;nested rules&#xff09;、 混合&#xff08;mixins&#xff09;、 函数&#xff08;functions&#xff09;等功能&#xff0c;并且完全兼容 CSS 语法。Sass 能…

[JavaScript]如何利用作用域块避免闭包内存泄漏?

出自《你不知道的JavaScript》上卷 以下是本书给出的反例: function process (data) {...} var bigdata{...} process(bigdata); var btn document.getElementById(x); btn.addEventListener(click, function click{...});click会被回调在其他位置, 在addEventListener函数内…

leetcode hot100(五)

11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你…

Unity 云渲染本地部署方案

Unity Render Streaming 云渲染环境搭建 0.安装 Unity Render Streaming 实现原理: 服务器与客户端实现功能包括: 详细内容见官方文档&#xff1a; 官方文档: https://docs.unity3d.com/Packages/com.unity.renderstreaming3.1/manual/tutorial.html Unity 流送云渲染介绍: …

洛谷 P3986 斐波那契数列

P3986 斐波那契数列 题目描述 定义一个数列&#xff1a; f ( 0 ) a , f ( 1 ) b , f ( n ) f ( n − 1 ) f ( n − 2 ) f(0) a, f(1) b, f(n) f(n - 1) f(n - 2) f(0)a,f(1)b,f(n)f(n−1)f(n−2) 其中 a, b 均为正整数&#xff0c;n ≥ 2。 问有多少种 (a, b)&…

【java面型对象进阶】------继承实例

继承结构下的标准Javabean 代码如下&#xff1a; package demo10;//定义员工父类 public class Employee {private String id;private String name;private double salary;//构造方法public Employee(){}public Employee(String id,String name,double salary){this.idid;thi…

Vitis 2024.1 无法正常编译custom ip的bug(因为Makefile里的wildcard)

现象&#xff1a;如果在vivado中&#xff0c;添加了自己的custom IP&#xff0c;比如AXI4 IP&#xff0c;那么在Vitis&#xff08;2024.1&#xff09;编译导出的原本的.xsa的时候&#xff0c;会构建build失败。报错代码是&#xff1a; "Compiling blank_test_ip..."…

【图论】并查集的学习和使用

目录 并查集是什么&#xff1f; 举个例子 组成 父亲数组&#xff1a; find函数&#xff1a; union函数&#xff1a; 代码实现&#xff1a; fa[] 初始化code: find code&#xff1a; 递归实现: 非递归实现: union code : 画图模拟&#xff1a; 路径压缩&#xff1a…

Java使用FFmpegFrameGrabber进行视频拆帧,结合Thumbnails压缩图片保存到文件夹

引入依赖 <dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><version>0.4.17</version></dependency><dependency><groupId>org.bytedeco</groupId><artifactId>ja…

mysql与redis的日志策略

MySQL 和 Redis 在日志记录方面采用了不同的策略&#xff0c;分别对应写前日志&#xff08;Write-Ahead Logging, WAL&#xff09;和写后日志&#xff08;Write-After Logging&#xff09;。以下是它们的详细说明&#xff1a; 1. MySQL&#xff1a;写前日志&#xff08;Write-A…

nacos安装,服务注册,服务发现,远程调用3个方法

安装 点版本下载页面 服务注册 每个微服务都配置nacos的地址&#xff0c;都要知道 服务发现 2个是知道了解 远程调用基本实现 远程调用方法2&#xff0c;负载均衡API测试 远程调用方法3&#xff0c;注解 负载均衡的远程调用&#xff0c; 总结 面试题

Ubuntu Qt: no service found for - “org.qt-project.qt.mediaplayer“

1、前言 在一次项目过程中&#xff0c;因项目需求&#xff0c;需要将windows开发的Qt项目迁移到ubuntu系统中&#xff0c;且在某个功能项中需要播放音频&#xff0c;在windows系统中能够正常运行&#xff0c;但在ubuntu系统中却显示defaultServiceProvider::requestService(): …

Blender制作次表面材质

效果: 主要用沃罗诺伊纹理做出云絮感 然后EV开启次表面设置

用 pytorch 从零开始创建大语言模型(四):从零开始实现一个用于生成文本的GPT模型

从零开始创建大语言模型&#xff08;Python/pytorch &#xff09;&#xff08;四&#xff09;&#xff1a;从零开始实现一个用于生成文本的GPT模型 4 从零开始实现一个用于生成文本的GPT模型4.1 编写 L L M LLM LLM架构4.2 使用层归一化对激活值进行标准化4.3 使用GELU激活函数…

vmware tools灰化

Windows7 32位的某些版本&#xff0c;已经不被vmware支持。下面是解决方法&#xff1a; 安装kb4474419补丁包&#xff1a;https://www.catalog.update.microsoft.com/Search.aspx?qKB4474419网络共享。必须要虚拟机和主机可通信。此方法不错&#xff0c;但是操作起来太麻烦。…

ubuntu高并发内核参数调优 - (压测客户端调优)

业务上要求集群提供10w并发&#xff0c;10w并发听上去不是很难&#xff0c;但10w并发持续1小时呢 在业务上线之前还需要我们自己对业务进行压测&#xff0c;俗称benchmark。 压测的服务器也是需要进行性能调优的&#xff0c;以下列出调优前后的参数对比&#xff0c;更直观的分析…

html5制作2048游戏开发心得与技术分享

2048游戏开发心得与技术分享 这里写目录标题 2048游戏开发心得与技术分享项目概述技术架构1. 核心技术栈2. 项目结构 核心功能实现1. 数据结构设计2. 移动逻辑实现3. 触摸支持 性能优化1. DOM操作优化2. 事件处理优化 开发心得1. 代码组织2. 调试技巧3. 用户体验优化 项目亮点技…

dify+deepseek联网搜索:免费开源搜索引擎Searxng使用(让你的大模型也拥有联网的功能)

docker安装SearXng 项目地址:https://github.com/searxng/searxng-docker 第一步 git clone下来 git clone https://github.com/searxng/searxng-docker.git第二步 进入 searxng-docker目录中修改docker-compose.yaml(直接复制粘贴) cd searxng-dockerdocker-compose.yaml …

docker的anythingllm和open-webui压缩包分享(国内镜像拉取,百度云压缩包分享)

文章目录 前言第一部分&#xff1a;镜像获取&#x1f680; 方式一&#xff1a;切换国内下载镜像✅1. 下载anythingllm✅ 2. 下载open-webui &#x1f680;方式二&#xff1a;下载我分享的百度云✅ anythingllm压缩包百度云链接❎ open-webui压缩包 第二部分&#xff1a;下载之后…

DeepSeek-R1深度解读

deepseek提出了一种通过强化学习&#xff08;RL&#xff09;激励大语言模型&#xff08;LLMs&#xff09;推理能力的方法&#xff0c;个人认为最让人兴奋的点是&#xff1a;通过RL发现了一个叫“Aha Moment”的现象&#xff0c;这个时刻发生在模型的中间版本中。在这个阶段&…