ByteMD - 掘金社区 MarkDown 编辑器的免费开源的版本,可以在 Vue / React / Svelte 中使用

ByteMD - 掘金社区 MarkDown 编辑器的免费开源的版本,可以在 Vue / React / Svelte 中使用

各位元宵节快乐,今天推荐一款字节跳动旗下掘金社区官方出品的 Markdown 编辑器 JS 开发库。

ByteMD 是一个用于 web 开发的 Markdown 编辑器 JavaScript 库,是字节跳动(也就是掘金社区)出品的 Markdown 格式的富文本编辑器,前端开发者可以基于这个库来将一款漂亮优秀的 Markdown 编辑器集成在自己开发的项目中。

ByteMD 官网

不知道大家有没有在掘金社区上发过文章,掘金上内置的 Markdown 编辑器内置了很多好看的主题,写作体验也很棒,界面简洁,没有那些永远用不上的功能。日常使用的文字、图片、公式、流程图、代码、表格、代码高亮等都有,是我很喜欢的一款编辑器。

掘金社区编辑器

掘金官方实际上把这款编辑器开源了,就是今天这篇文章我要介绍的 ByteMD,我们可以轻松地集成在自己的项目中。

两个组件

ByteMD 中有两个组件:Editor 和 Viewer。对应 Editor 是 Markdown 编辑器,而 Viewer 就是解析和将 Markdown 文档显示为富文本格式的阅读器。

在 Vue 中的使用方法

由于我自己用的是 Vue,下面演示一下怎么来使用 ByteMD。在使用组件之前,首先要导入 CSS 文件来显示样式。

在 Vue 2 中安装:

接着就可以在 Vue 文件中使用组件,比如加载 Editor 组件:

编辑器效果图

一个简单的 Markdown 编辑器就做好了,如果需要丰富的功能,就可以用插件的方式来加载,比如数学公式、emoji 表情、流程图等,下面是比较常用的插件:

这样一款专业漂亮的 Markdown 就集成好了,非常简单。

注意事项

官方提供的开发文档是英文的,阅览起来较为费劲,并且很多细节功能没有什么代码例子,遇到问题还是要考验自己解决问题的能力。

ByteMD 是由字节跳动(也就是掘金社区)开发的 Markdown 编辑器,项目基于 MIT 协议免费开源,任何人都可以免费下载来使用,也可以用在商业项目上。

这是一款用于 web 开发的 Markdown 库,如果你想找 Markdown 编辑器软件,可以看看我之前推荐的 Mark Text。

原文链接:https://www.thosefree.com/bytemd

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云服务器2核4G服务器收费价格表,1个月和一年报价

阿里云2核4G服务器多少钱一年?2核4G服务器1个月费用多少?2核4G服务器30元3个月、85元一年,轻量应用服务器2核4G4M带宽165元一年,企业用户2核4G5M带宽199元一年。本文阿里云服务器网整理的2核4G参加活动的主机是ECS经济型e实例和u1…

国辰智企TMS智慧园区物流一站式平台,优化园区物流,智取未来!

在传统的物流园区管理中,我们常常面临诸多问题。人工管理流程复杂,效率低下,导致园区运营成本居高不下。园区内堵车现象严重,交通混乱,影响物流效率和客户体验。安全管理不到位,存在诸多隐患,无…

基于单片机的太阳能热水器控制系统设计与仿真

目录 摘要 3 Controling system design and simulation of the solar water heater based on single chip microcomputer 4 第一章 前言 5 1.1设计背景和意义 5 1.2国内外的发展趋势 5 第二章 系统设计总览 7 2.1控制中心 7 2.2外围设备 7 第三章 系统硬件设计 8 3.1 总硬件的…

SUS-Chat-34B笔记

名称SUS-Chat: Instruction tuning done right团队南方科技大学、IDEA研究院CCNL团队代码地址https://github.com/SUSTech-IDEA/SUS-Chat简介具有超强多轮对话能力,擅长模仿人类思考过程,在各大榜单上超越同量级的模型。 介绍 SUS-Chat-34B模型是南方科…

[论文笔记] ChatDev:Communicative Agents for Software Development

Communicative Agents for Software Development(大模型驱动的全流程自动化软件开发框架) 会议arxiv 2023作者Chen Qian Xin Cong Wei Liu Cheng Yang团队Tsinghua University论文地址https://arxiv.org/pdf/2307.07924.pdf代码地址https://github.com/O…

旅游系统-软件与环境

运行 1.下载软件并进行环境配置 2.导入项目包以及SQL文件 (1)VsCode 管理员运行打开 a.新建terminal 注意: 1.执行 npm config set registry https://registry.npm.taobao.org 2.执行 npm install 3.执行 $env:NODE_OPTIONS“–openssl-legacy-provider” b.输入…

奇怪的比赛(Python,递归,状态压缩动态规划dp)

目录 前言:题目:思路:递归:代码及详细注释: 状态压缩dp:代码及详细注释: 总结: 前言: 这道题原本是蓝桥上的题,现在搜不到了,网上关于此题的讲解…

【SQL】1280. 学生们参加各科测试的次数 (笛卡尔积)

前述 知识点回顾:数据库中的四大join & 笛卡尔乘积(以MySQL为例) 笛卡尔积的两种写法 select * from stu,class; select * from stu cross join class; 题目描述 leetcode题目:1280. 学生们参加各科测试的次数 Code 写法…

【算法与数据结构】堆排序TOP-K问题

文章目录 📝堆排序🌠 TOP-K问题🌠造数据🌉topk找最大 🚩总结 📝堆排序 堆排序即利用堆的思想来进行排序,总共分为两个步骤: 建堆 升序:建大堆 降序:建小堆利…

SpringBoot项目通过触发器调度实现定时任务

文章目录 前言一、quartz是什么?二、quartz中核心概念三、集成步骤1.引入依赖2.demo样例a.定义一个任务参数实体类b.定义操作触发器、定时任务接口及实现c.作业实现d.结果截图 四、其他1.QuartzJobBean和Job区别2.注意事项3.作业(Job)和触发器…

2024年跨境电商大热门:哪个平台最具赚钱潜力?!

2024年,哪个跨境电商平台好做,这取决于多种因素,如平台的知名度、流量、用户基础、市场定位、费用结构以及个人或企业的具体需求和资源。以下是一些近期比较热门,表现突出的跨境电商平台,但请注意,每个平台…

数据库系统概论(超详解!!!) 第四节 关系数据库标准语言SQL(Ⅰ)

1.SQL概述 SQL(Structured Query Language)结构化查询语言,是关系数据库的标准语言 SQL是一个通用的、功能极强的关系数据库语言 SQL的动词 基本概念 基本表 :本身独立存在的表; SQL中一个关系就对应一个基本表&am…

分享最有效脱单方法【单身狗必看】

用这个方法找不到对象我倒立 ! 发送内容: "脱单神器", 实现今年脱单

# termux连接云服务器

连接服务器 ssh nameip termux使用 pkg install openssh

Java Swing游戏开发学习14

内容来自RyiSnow视频讲解 前言 这一节讲的是Custom Font定制字体,就是在游戏中显示文字的地方,使用特定的ttf字体文件进行文字显示,提升游戏体验。如果觉得arial字体可以接受,这一节可以跳过,或者认为它太普通&#…

Linux离线安装Docker-Oracle_11g

拉取oracle11g镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g创建11g容器 docker run -d -p 1521:1521 --name oracle11g registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g查看容器是否创建成功 docker ps -a导出oracle容器,查看…

HarmonyOS入门学习

HarmonyOS入门学习 前言快速入门ArkTS组件基础组件Image组件Text组件TextInput 文本输入框Buttonslider 滑动组件 页面布局循环控制ForEach循环创建组件 List自定义组件创建自定义组件Builder 自定义函数 状态管理Prop和LinkProvide和ConsumeObjectLink和Observed ArkUI页面路由…

MCU技术的创新浪潮与产业变革

MCU技术的创新浪潮与产业变革 一、MCU技术的创新发展 MCU,即微控制器,作为现代电子设备的核心部件,一直在不断地创新与发展。随着科技的进步,MCU的性能得到了极大的提升,功能也越来越丰富。从8位到32位,再…

OpenCV4.9.0在Android 开发简介

查看:OpenCV系列文章目录(持续更新中......) 上一篇:使用 Clojure 进行 OpenCV 开发简介 下一篇:暂无 引言: OpenCV是一个跨平台计算机视觉库,广泛用于图像处理、计算机视觉和机器学习等领域…

TinyEMU源码分析之虚拟机初始化

TinyEMU源码分析之虚拟机初始化 1 初始化结构参数2 配置RAM地址空间3 初始化设备4 拷贝BIOS和Kernel5 手动写入5条指令6 体验第一条指令的执行 本文属于《 TinyEMU模拟器基础系列教程》之一,欢迎查看其它文章。 本文中使用的代码,均为伪代码&#xff0c…