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

vue项目中渲染markdown并处理报错

news 来源：原创 2025/8/18 20:14:05

前言：想在vue项目中渲染markdown并处理报错问题
有以下几种方式：
1、使用第三方Markdown插件
2、通过Markdown转HTML工具
3、使用Vue组件处理Markdown
一、首先第一种：使用第三方Markdown插件
安装vue-markdown插件或者 markdown-it，两种各有利弊
应用场景
‌vue-markdown‌：专为Vue.js设计，能够快速地将Markdown文本转换为HTML，并且支持多种Markdown语法扩展，如表格、任务列表、脚注、数学公式等。它适用于需要在Vue项目中轻松集成Markdown支持的场景‌
‌markdown-it‌：是一个高度可配置的Markdown解析器，支持通过插件扩展功能。它具有高性能、可扩展性和灵活性，可以轻松集成到各种JavaScript框架中，如Vue、React等。markdown-it适用于需要高性能解析和渲染Markdown内容的场景‌
功能特点
‌vue-markdown‌：
‌高性能‌：能够快速将Markdown文本转换为HTML。
‌支持多种语法扩展‌：包括表格、任务列表、脚注、数学公式等。
‌易于集成‌：专为Vue.js设计，使用简单方便‌
‌markdown-it‌：
‌高性能‌：快速解析和渲染Markdown内容。
‌高度可配置‌：支持通过插件扩展功能，兼容CommonMark规范，并可配置以支持其他Markdown扩展。
‌灵活性‌：可以轻松集成到各种JavaScript框架中‌
二、通过Markdown转HTML工具
1、安装Markdown转HTML工具 marked
2、编写转换逻辑
3、在Vue组件中渲染HTML内容

错误问题：markdown-it Can’t import the named export ‘P’ from non EcmaScript module
这是在webpack当中没支持mjs后缀导致

{test: /\.mjs$/,include: /node_modules/,type: 'javascript/auto'
},

相关文章：

vue项目中渲染markdown并处理报错

前言：想在vue项目中渲染markdown并处理报错问题有以下几种方式： 1、使用第三方Markdown插件 2、通过Markdown转HTML工具 3、使用Vue组件处理Markdown 一、首先第一种：使用第三方Markdown插件安装vue-markdown插件或者 markdown-it&#xf…...

编程日记 2025/8/18 20:14:05

Vue3.5 企业级管理系统实战（十七）：角色管理

本篇主要探讨角色管理功能，其中菜单权限这里先不实现，后续在菜单管理中再进行实现。接口部分依然是使用 Apifox mock 的。 1 角色 api 在 src/api/role.ts 中添加角色相关 api，代码如下： //src/api/role.ts import service fro…...

编程日记 2025/8/17 8:27:59

【AI论文】FormalMATH：大型语言模型形式化数学推理能力基准测试

摘要：正式的数学推理仍然是人工智能面临的一个关键挑战，受到现有基准在范围和规模上的限制。为了解决这个问题，我们提出了FormalMATH，这是一个大规模的Lean4基准，包含5560个经过形式验证的问题，这些问题涵…...

编程日记 2025/8/18 20:11:54

9-4 USART串口数据包

HEX数据包的接收研究几个小问题 1.包头包尾和数据载荷重复的问题这里定义FF为包头，FE为包尾，如果我传输的数据本身就是FF和FE怎么呢？那这个问题确实存在，如果数据和包头包尾重复，可能会引起误判。我们有以下几种解…...

编程日记 2025/8/18 20:08:52

Babylon.js学习之路《前言：为什么要学习Babylon.js 》

文章目录引言：3D 开发在 Web 中的崛起为什么需要 Web 3D 开发？当选火热的应用场景数据表达方式的改变 Web 3D 的独特优势跨平台与零安装开发成本低即时更新与传播便捷 WebGL 的定位与挑战WebGL 是什么？WebGL 的直接使用痛点为什么需要 Baby…...

编程日记 2025/8/18 20:08:52

今年我国已发生三级以上地震318次

快科技5月6日消息，根据中国地震台网的统计，今年以来（截至4月30日），我国共发生三级以上地震318次，其中3.0-3.9级248次，4.0-4.9级61次，5.0-5.9级7次，6.0-6.9级2次&#xff…...

编程日记 2025/8/17 9:52:08

在与大语言模型交互中的礼貌现象：技术影响、社会行为与文化意义的多维度探讨

概述关于是否值得对 AI 保持礼貌的公众意见，几乎和咖啡或红酒的最新研究结果一样频繁变化——这个月被推崇备至，下个月又受到质疑。即便如此，越来越多的用户现在在提示语中加入“请”或“谢谢”，这不仅仅是因为习惯，…...

编程日记 2025/8/18 15:28:35

Java后端开发day42--IO流（二）--字符集字符流

（以下内容全部来自上述课程） 拓展. try…catch异常处理（能看懂） 接口：AutoCloseable 特点：特定的情况下，可以自动释放资源注意：只有实现了AutoCloseable接口的类，才能…...

编程日记 2025/8/17 8:27:50

【HarmonyOS 5】鸿蒙发展历程

【HarmonyOS 5】鸿蒙发展历程一、鸿蒙 HarmonyOS 版本年代记鸿蒙 1.0： 2019 年 8 月 9 日，华为在开发者大会上正式发布鸿蒙 1.0 系统，这一版本首次应用于华为荣耀智慧屏产品中，标志着华为正式进军操作系统领域。该版本初步展现…...

编程日记 2025/8/18 20:08:56

使用蚁群算法求解VRPTW问题

这里写目录标题蚁群优化算法Python实现ACO求解VRPTW问题Java实现ACO求解VRPTW问题蚁群优化算法蚁群算法（ACO）适合求解带时间窗的车辆路径优化问题（VRPTW），主要基于其仿生智能机制与问题特性的深度契合，具体体现在以下六个方面：时间窗约束的自然映射信息素导向与时间…...

编程日记 2025/8/18 20:14:05

内存的位运算

示例：提取和设置标志位假设我们有一个32位的整数，其中不同的位代表不同的标志。例如： 位0：是否开启日志（0表示关闭，1表示开启） 位1：是否启用调试模式（0表示禁用&#…...

编程日记 2025/8/18 20:11:55

高性能网络优化：深入解析忙轮询（Busy Polling）技术

在现代高性能网络应用中，如何降低数据包处理延迟、提升吞吐量是开发者与系统工程师的核心挑战之一。传统的“中断驱动”模式在高负载场景下表现不佳，而忙轮询（Busy Polling）作为一种优化技术，通过主动轮询机制显著改善网络性能。本文将从原理、实现到实践，全面解析忙轮询…...

编程日记 2025/8/18 20:08:53

Linux grep 命令详解及示例大全

文章目录一、基本语法二、常用选项及示例1. 基本匹配：查找包含某字符串的行2. 忽略大小写匹配 -i3. 显示行号 -n4. 递归查找目录下的文件 -r 或 -R5. 仅显示匹配的字符串 -o6. 使用正则表达式 -E（扩展）或 egrep7. 显示匹配前后行 -A, -B, -C…...

编程日记 2025/8/18 20:11:55

前端知识-hook

React 的生命周期管理被称为 Hook 技术，源于其设计哲学与实现机制中“钩入”组件运行流程的特性。这一命名既是对传统编程中“钩子”（Hook）概念的延伸，也体现了 React 对函数式组件的逻辑注入能力。以下从多个维度解析其关联性&am…...

编程日记 2025/8/18 20:08:51

uv全功能更新：统一管理Python项目、工具、脚本和环境的终极解决方案

花下猫语：uv 项目自发布起就大受欢迎，目前 Github star 52.6 K，远超过它的同类竞品们。前不久，它的创始人在 X 上披露了一组惊人的数据：uv 曾占据了 PyPI 超过 20% 的流量，用户每天通过它发起约 4-5 亿次下…...

编程日记 2025/8/18 20:11:56

Redis 使用及命令操作

文章目录一、基本命令二、redis 设置键的生存时间或过期时间三、SortSet 排序集合类型操作四、查看中文五、密码设置和查看密码的方法六、关于 Redis 的 database 相关基础七、查看内存占用一、基本命令 # 查看版本 redis-cli --version 结果：redis-cli 8.0.0red…...

编程日记 2025/8/18 20:08:56

ROS2：自定义接口文件（无废话）

目录一、ROS2接口文件定义二、创建接口文件步骤三、验证是否创建成功，以及自定义接口文件的使用一、ROS2接口文件定义 ROS2中接口文件的格式根据通信的类型可以分为三种： 话题通信：.msg文件常用格式为：[消息类型] 消息名称 #话…...

编程日记 2025/8/18 20:08:55

如何配置 VScode 断点调试Linux 工程代码

1、Windowns 安装WSL 环境 2、VSCode 中安装 Romote-SSH扩展，进行连接到WSL下的Linux 环境安装Romote-SSH成功后，在左下角显示 ， 点击此图标出现 “连接到WSL”, 进行连接显示，则表明链接成功 3、 VSCode 安装 C/C扩展的调试…...

编程日记 2025/8/18 20:08:52

tinyrenderer笔记（Phong光照模型）

tinyrenderer个人代码仓库：tinyrenderer个人练习代码前言在前面的渲染中，我们读取模型的 diffuse 纹理，然后根据法线计算模型的颜色。这次我们引入一种新的光照模型—— Phong 光照模型，Phong 光照模型将光照分为了三类&#x…...

编程日记 2025/8/18 20:08:54

Twin Builder 中的电池等效电路模型仿真

电池单元热设计挑战电池热管理的主要挑战之一是确保温度低于最大工作限值。较高的温度会导致效率降低、加速老化和潜在的安全隐患。工程师必须了解电池产生的热量，才能充分设计冷却系统。了解和预测电池模块的热行为需要将电池的热损耗与电池单元的电气机械特性…...

编程日记 2025/8/18 20:11:55

SQLark可以支持PostgreSQL了，有哪些新功能？

SQLark（百灵连接）是一款国产的数据库开发和管理工具，用于快速查询、创建和管理不同类型的数据库系统，支持达梦、Oracle 和 MySQL 数据库。最新发布的 SQLark V3.4 版本新增了对 PostgreSQL 数据库的支持。我试用了一下&#xff…...

编程日记 2025/8/18 20:08:53

Redis 7.0中5种新特性及实战应用

Redis 7.0引入了多项革命性的新特性，不仅在性能和可靠性方面有所提升，更在功能和使用体验上有了质的飞跃。本文将介绍Redis 7.0的五大关键新特性，可以根据实际情况利用Redis 7.0的强大功能，构建更高效、更可靠的应用系统。特性一…...

编程日记 2025/8/17 17:33:14

游戏如何应对AssetStudio解包工具

「游戏解包」是指将游戏文件中被压缩或加密的资源提取出来，通过解包工具对资源进行修改、查看或导出。这个过程通常涉及到将游戏客户端中的数据包进行解压，故称为“解包”。游戏的资源文件包含代码、图片、视频、音频等重要内容。一旦被解密&#xff0…...

编程日记 2025/8/18 20:08:55

UE5 渲染思路笔记(角色)

参考示例首先是怎么做到辉光只有部分有而整体没有的使用的是Bloom内的阈值,控制光的溢光量 Threshold（阈值）：这个参数决定了图像中哪些像素会参与泛光计算。只有那些亮度超过阈值的像素才会触发泛光效果。阈值越低，更多的像素会…...

编程日记 2025/8/18 20:11:54

Sublime Text快速搭建Lua语言运行环境

第一步先去Sublime Text官网下载安装 Sublime Text - Text Editing, Done Right 第二步下载lua编译运行程序 Lua - Joe DFs Builds 第三步在Sublime Text中配置lua运行环境 {"cmd": ["D:/Lua/lua.exe", "$file"], "file_regex"…...

编程日记 2025/8/17 9:32:48

提示词的嵌入空间优化

提示词的嵌入空间优化提示词的嵌入空间优化的定义提示词的嵌入空间优化，是指通过技术手段**调整提示词在低维向量空间（嵌入空间）**中的表示，使其更精准地捕捉语义信息、增强语义关联性，或适配特定任务需求，从而提升模型（如大语言模型）对提示词的理解与处理效果。…...

编程日记 2025/8/18 17:54:20

STM32--GPIO

教程视频博主教程 STM32系统结构图 GPIO GPIO（General Purpose Input/Output）是STM32内部的一种外设。一个STM32芯片内存在多个GPIO外设，每个GPIO外设有16个引脚； 比如GPIOA：PA0~PA15; GPIOB：PB0~…...

编程日记 2025/8/18 20:08:54

npm下载插件无法更新package.json和package-lock.json文件的解决办法

经过多番查证，使用npm config ls查看相关配置等方式，最后发现全局的.npmrc文件的配置多写了globaltrue，去掉就好了如果参数很多，不知道是哪个参数引起的，先只保留registryhttp://xxx/，试试下载&#xff0…...

编程日记 2025/8/17 9:02:52

ABAQUS三维CT重建插件CT2Model3D V2版本

插件介绍 CT2Model 3D V2.0插件采用Python 3.10研发，适配2024及以上版本的Abaqus软件，具备在Abaqus平台中基于CT断层扫描图像的三维重建功能，插件支持批量导入tif、tiff、png、jpg等格式的图像文件，推动了数字化建模技术与有限元…...

编程日记 2025/8/17 8:37:10

导入飞帆的网页为组件并注入数据驱动

飞帆制作的网页可以作为 Vue 2 组件导入到你自己的网页中使用。这里我们来试一下。并且将数据传入这个组件，驱动里面的仪表盘控件。 https://andi.cn/page/622177.html...

编程日记 2025/8/18 20:08:55

C语言的重要知识点☞static关键字

static译为"静态的"，该关键字可以修饰以下内容： 修饰局部变量修饰全局变量修饰函数在讲解static的具体作用前需要先知道"作用域"以及"生命周期"的概念： 作用域： 作用域是一个程序设计概念&#…...

编程日记 2025/8/18 20:11:53

unordered_map和unordered_set的设计

#pragma once #include"HashTable.h" namespace aqc {template<class K,class V,class HashHashFunc<K>>class unordered_map{public:struct MapKeyOfT{const K& operator()(const pair<K, V>& kv)//pair对象是const返回值也得是const{ret…...

编程日记 2025/8/18 20:11:53

Servlet--快速入门及HTTP概述

Servlet概述 Servlet：server applet,是用Java编写的服务器端程序，其主要功能在于交互式的浏览和修改数据,生成动态web内容,一般来说,Servlet是指实现了这个Servlet接口的类在Java中，Servlet是用于创建动态Web内容的服务器端组件。 Servle…...

编程日记 2025/8/18 20:14:04

【LeetCode Hot100 | 每日刷题】二叉树的层序遍历

题目： 给你二叉树的根节点 root ，返回其节点值的层序遍历。 （即逐层地，从左到右访问所有节点）。示例 1： 输入：root [3,9,20,null,null,15,7] 输出：[[3],[9,20],[15,7]]示例 2&a…...

编程日记 2025/8/18 20:11:53

编码器型与解码器型语言模型的比较

编码器型与解码器型语言模型的比较 1. 引言自然语言处理（NLP）领域近年来取得了革命性进展，这在很大程度上归功于基于Transformer架构的语言模型。在这一技术生态中，编码器型（Encoder-only）和解码器型&am…...

编程日记 2025/8/17 9:16:59

Java 函数式编程

函数式编程的意义函数式编程理念强调函数纯粹性和不可变性，这有助于写出更稳定、更易测试的代码，尤其在并发环境下减少 bug lambda 表达式 import java.util.function.Function;public class Strategize {Function<String, String> getString …...

编程日记 2025/8/17 17:59:36

MySQL初阶：基础增删改查（CRUD）

创建（Create） 先创建一个表 1）单独插入一条 insert into 表名 values （列名类型）...； 插入的记录要和表一开始创建记录的类型，个数，结构一样。如果不一样，就会报错。…...

编程日记 2025/8/17 17:59:34

yolo训练用的数据集的数据结构

Football Players Detection using YOLOV11 可以在roboflow上标注 Sign in to Roboflow 训练数据集只看这个data.yaml 里面是train的image地址和classnames 每个image一一对应一个label 第一个位是分类，0是classnames[0]对应的物体，现在是cuboid &…...

编程日记 2025/8/18 11:54:24

vue3+ts继续学习

我们再写点东西，这里面都是vue2的语法，应该都能看明白！我们写完直接去运行一下代码！ 发现什么都没有发生！为什么呢？因为我们在App.vue中没有引入！哈哈哈哈！这样就好了！注…...

编程日记 2025/8/17 8:58:11

Oracle01-入门

零、文章目录 Oracle01-入门 1、Oracle简介 （1）数据库基础数据库基础请参考：https://blog.csdn.net/liyou123456789/article/details/131207068 （2）Oracle是什么 ORACLE 数据库系统是美国 ORACLE 公司&#xff…...

编程日记 2025/8/17 8:28:04

即开即用，封装 Flask 项目为 exe 文件实操步骤

见字如面，朋友们！ 嗨，这里是 AIGC 创意人_竹相左边！ 正如你们所知，我正在通过 AI 自学软硬件工程师，目标是手搓一台可回收火箭玩具！ 最近，我被《流浪地球 2》中马兆的那句“没有硬…...

编程日记 2025/8/17 10:43:01

【STM32单片机】#14 PWR电源控制

主要参考学习资料： B站江协科技 STM32入门教程-2023版细致讲解中文字幕开发资料下载链接：https://pan.baidu.com/s/1h_UjuQKDX9IpP-U1Effbsw?pwddspb 单片机套装：STM32F103C8T6开发板单片机C6T6核心板实验板最小系统板套件科协目录 PWR…...

编程日记 2025/8/16 23:32:34

FastComposer论文问题与解决

在FastComposer中，跨注意力定位监督（Cross-Attention Localization Supervision） 的实现是通过以下步骤完成的，核心思想是利用分割掩码约束扩散模型中跨注意力图的分布，确保每个主体的特征仅影响图像中对应的区域。具体…...

编程日记 2025/8/17 10:26:03

51单片机同一个timer 作为定时器和波特率发生器么？

在51单片机中，同一个Timer（定时器）不能同时作为普通定时器和波特率发生器。这是因为这两种功能都需要对Timer的寄存器进行配置和操作，而它们的配置要求是冲突的。具体来说： 1. 普通定时器功能配置要求：需…...

编程日记 2025/8/17 9:40:10

爱情的本质是什么--deepseek

爱情的本质是一个跨越生物学、心理学、哲学和社会学的复杂命题。不同学科视角下，爱情呈现出多层次的真相，但核心可以归结为： “爱情是进化塑造的生存策略、神经化学的短暂狂欢，以及人类对抗存在孤独的精神创造。” 以下从四个维…...

编程日记 2025/8/17 10:23:10

Leetcode 刷题记录 07 —— 链表

本系列为笔者的 Leetcode 刷题记录，顺序为 Hot 100 题官方顺序，根据标签命名，记录笔者总结的做题思路，附部分代码解释和疑问解答。 01 相交链表 /*** Definition for singly-linked list.* struct ListNode {* int val;* …...

编程日记 2025/8/17 10:34:25

Android View#post()源码分析

文章目录 Android View#post()源码分析概述onCreate和onResume不能获取View的宽高post可以获取View的宽高总结 Android View#post()源码分析概述在 Activity 中，在 onCreate() 和 onResume() 中是无法获取 View 的宽高，可以通过 View#post() 获取 Vi…...

编程日记 2025/8/18 14:55:04

dubbo限流

单机限流限流过滤器 package com.doudou.filter;import org.apache.dubbo.common.URL; import org.apache.dubbo.common.constants.CommonConstants; import org.apache.dubbo.common.extension.Activate; import org.apache.dubbo.rpc.*;import java.util.concurrent.Concu…...

编程日记 2025/8/16 20:57:04

IBM BAW（原BPM升级版）使用教程：基本概念

本部分为“IBM BAW（原BPM升级版）使用教程系列”内容的补充。一、IBM BAW中的流程概念在IBM Business Automation Workflow（BAW）中，流程定义是流程设计的核心组成部分，它涵盖了流程的结构、任务、数据流…...

编程日记 2025/8/17 8:51:40

1. 视频基础知识

1. 图像基础概念像素：像素是一个图片的基本单位，pix是英语单词picture，加上英语单词“元素element”，就得到了pixel，简称px。所以“像素”有“图像元素”之意。分辨率：指的是图像的大小或者尺寸。比如 19…...

编程日记 2025/8/17 9:45:06