Vue3引入markdown编辑器--Bytemd

字节跳动开源了一款markdown编辑器,bytemd,项目地址:GitHub - bytedance/bytemd: ByteMD v1 repository

安装

npm i @bytemd/vue-next

引入方式如下,再main.js中引入样式

import 'bytemd/dist/index.css'

直接封装一个Markdown编辑器

<template><Editor :value="value" :plugins="plugins" @change="handleChange" />
</template><script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import { Editor, Viewer } from "@bytemd/vue-next";
import { withDefaults, defineProps } from "vue";
import highlight from "@bytemd/plugin-highlight";const plugins = [gfm(), highlight()];// 定义组件属性类型
interface Props {value: string;handleChange: (v: string) => void;
}const props = withDefaults(defineProps<Props>(), {value: () => "",handleChange: (v: string) => {console.log(v);},
});
</script>

封装一个Markdown展示组件
 

<template><Viewer :value="value" :plugins="plugins" />
</template><script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import { Viewer } from "@bytemd/vue-next";
import { withDefaults, defineProps } from "vue";
import highlight from "@bytemd/plugin-highlight";const plugins = [gfm(), highlight()];// 定义组件属性类型
interface Props {value: string;
}const props = withDefaults(defineProps<Props>(), {value: () => "",
});
</script>

接下来就可以在需要用到的地方引入组件就可以了。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197088.shtml

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

相关文章

Windows 10安装FFmpeg详细教程

Windows 10安装FFmpeg详细教程 0. 背景 在搭建之前的项目环境时&#xff0c;需要安装ffmpeg&#xff0c;在此记录下过程 1. 官网下载 点击进入官网&#xff1a;ffmpeg&#xff0c;官网地址&#xff1a;https://ffmpeg.org/download.html 如图所示&#xff0c;点击Windows图标…

[传智杯 #3 练习赛] 单位转换

题目描述 我们知道计算机的大小单位有 B, KB, MB 等&#xff0c;现在请你编写一个计算器进行大小单位换算。 提示&#xff0c;11 GB 210210 MB 220220 KB 230230 B。 输入格式 输入一个字符串&#xff0c;由一个 0 到 1023 之间的整数&#xff0c;一个单位名称&#xff…

2023年抗量子加密的十件大事

量子计算机攻破现有密码算法的那一天被称为“Q-Day”。一些安全专家认为&#xff0c;Q-Day将在未来十年内发生&#xff0c;但考虑到人工智能和量子计算能力的突飞猛进&#xff0c;后量子时代很有可能会提前到来。一些研究人员预测量子计算机可在2030年&#xff08;甚至更早&…

Python中判定列表是否包含某个元素的方法

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python中判定列表是否包含某个元素的方法&#xff0c;全文4000字&#xff0c;阅读大约10分钟。 在Python编程中&#xff0c;判定一个列表是否包含特定元素是一项常见任务。本…

大模型技术的发展与实践

一、大模型的概念 大型语言模型&#xff0c;也称大语言模型、大模型&#xff08;Large Language Model&#xff0c;LLM&#xff1b;Large Language Models&#xff0c;LLMs) 。 大语言模型是一种深度学习模型&#xff0c;特别是属于自然语言处理&#xff08;NLP&#xff09;的…

类和对象——(6)友元

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 没有存储汗水&#xff0c;就无法支取成…

【LeetCode】每日一题 2023_12_1 找出叠涂元素(读题/数组/哈希)

文章目录 刷题前唠嗑题目&#xff1a;找出叠涂元素题目描述代码与解题思路 结语 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 新的一个月开始啦&#xff01;这个月也要继续蝉联月度刷题&#xff01; 题目&#xff1a;找出叠涂元素 题目链接&a…

SD-WAN组网中的CPE及云服务CPE部署方法

什么是CPE&#xff1f; CPE全称为Customer Premises Equipment&#xff0c;即客户端设备&#xff0c;在SD-WAN中通常为路由器&#xff0c;部署在中心点和分支上&#xff0c;提供连接和路由、协议转换、流量监控等功能。一般可分为硬件CPE和虚拟化CPE&#xff08;virtual CPE&a…

python3实现比较两张图片的相似度,并检测图片内容是否发生明显变化

要比较两张图片的相似度&#xff0c;并检测图片内容是否发生明显变化&#xff0c;可以使用 Python 中的图像处理库如 OpenCV 和 scikit-image。这些库提供了计算图像相似度的功能。 使用 Python 的 scikit-image 库来比较两张图片的相似度。它采用结构相似性指数&#xff08;St…

python结构数据类型【侯小啾python基础领航计划 系列(六)】

python结构数据类型【侯小啾python领航计划 系列(六)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

关于使用百度开发者平台处理语音朗读问题排查

错误信息&#xff1a;"convert_offline": false, "err_detail": "16: Open api characters limit reach 需要领取完 识别和合成都要有

vscode里面使用vue的一些插件,方便开发

1、vue 2 Snippets &#xff08;vue语法提示&#xff09; vue提示这个也可以 1.1 Vue VSCode Snippets 2、vetur Vetur支持.vue文件的语法高亮显示&#xff0c;除了支持template模板以外 3、Element UI Snippets(饿了么的提示) 4、indent-rainbow&#xff08;缩进高亮提示) 5…

SQL Server 数据库,创建数据表

2.3表的基本概念 表是包含数据库中所有数据的数据库对象。数据在表中的组织方式与在电子表格中相似&#xff0c;都是 按行和列的格式组织的&#xff0c;每行代表一条唯一的记录&#xff0c;每列代表记录中的一个字段.例如&#xff0c;在包含公 司员工信息的表中&#xff0c;每行…

错误处理(9)

错误处理 1.用panic!处理不可恢复的错误1.1对应panic时的栈展开或终止1.2使用panic!的backtrace1.尝试访问超越vector结尾的元素&#xff0c;这会造成panic!2.当设置RUST_BACKTRACE环境变量时panic!调用所生成的backtrace信息 2.用Result处理可恢复的错误1.使用match表达式处理…

java并发-线程生命周期

文章目录 前言状态图状态变化说明补充说明 前言 线程的生命周期指的是线程从创建出来到最终消亡的整个过程&#xff0c;以及过程中的状态变化。 状态图 以下图用mermaid语法绘制&#xff1a; #mermaid-svg-32vKT6KmFdlYvCnr {font-family:"trebuchet ms",verdana,…

日期类 - Java

知道怎么查&#xff0c;怎么用即可&#xff0c;不用每个方法都背 日期类 第一代日期类方法演示 第二代日期类方法演示 第三代日期类前面两代日期类的不足分析第三代日期类常见方法方法演示 第一代日期类 Date类&#xff1a;精确到毫秒&#xff0c;代表特定的瞬间SimpleDateFor…

Redis缓存——Spring Cache入门学习

Spring Cache 介绍 Spring Cache 是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。 Spring Cache 提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;例如&#xff1a; EHCacheCaffeineR…

程序员世界破破烂烂,低代码总在缝缝补补

在经历了十几年的发展后&#xff0c;前端开发变得越来越复杂&#xff0c;门槛也越来越高&#xff0c;要使用当下流行的 UI 组件库&#xff0c;你必须懂 npm、webpack、react/vue&#xff0c;必须熟悉 ES6 语法&#xff0c;最好还了解状态管理&#xff0c;比如 Redux&#xff0c…

【IPv6】IPv6协议

一、IPv6数据报格式 这是与v4报头的对比 1.8bit的版本保留了&#xff0c;v4版本就是4&#xff0c;v6就是6。 2.v6去除了v4的首部长度字段&#xff0c;因为v6的首部长是固定的40字节。 3.服务类型&#xff08;Type of Service, ToS&#xff09;和通信类型&#xff08;Traffi…

Leetcode周赛374补题(3 / 3) - EA专场

不愧是EA的题&#xff0c;我最爱的模拟人生……好难&#xff0c;呜呜 目录 1、找出峰值 - 暴力枚举 2、需要添加的硬币的最小数量 - 思维 贪心 3、统计完全子字符串 - 滑窗 分组循环 1、找出峰值 - 暴力枚举 2951. 找出峰值 class Solution {public List<Integer> …