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

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

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

相关文章

ModbusRTU/TCP/profinet网关在西门子博图软件中无法连接PLC的解决方法

ModbusRTU/TCP/profinet网关在西门子博图软件中无法连接PLC的解决方法 在工业生产现场,ModbusRTU/TCP/profinet网关在与西门子PLC连接时,必须要使用西门子的博图软件来进行配置,博图v17是一个集成软件平台,专业版支持300、400、12…

【机器学习】基于正余弦搜索算法优化的BP神经网络分类预测(SCA-BP)

目录 1.原理与思路2.设计与实现3.结果预测4.代码获取 1.原理与思路 【智能算法应用】智能算法优化BP神经网络思路【智能算法】正余弦优化算法(SCA)原理及实现 2.设计与实现 数据集: 多输入多输出:样本特征24,标签类…

利用Python进行数据清洗与预处理:Pandas的高级用法【第147篇—Pandas的高级用法】

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 利用Python进行数据清洗与预处理:Pandas的高级用法 在数据科学和机器学习领域&…

【Linux】调试器-gdb的使用说明(调试器的配置,指令说明,调试过程说明)

目录 00.背景 01.安装 02.生成调试信息 03.调试过程 00.背景 在软件开发中,通常会为程序构建两种不同的版本:Debug模式和Release模式。它们之间的区别主要在于优化级别、调试信息、错误检查等方面: 1.Debug 模式: 优化级别低…

使用uni-app框架进行移动端的适配(uniapp px转rpx)

1、打开uniapp 官网找到 插件市场介绍2、点击插件市场 px2rpx - DCloud 插件市场3、选择使用HBuilderX导入插件4、在HBuilder中点击右键选择开启px2rpx 5、开启成功后会有提示 6、根据设计搞的尺寸就行,我的是在这750*1620的,正常写px,保存…

[音视频学习笔记]六、自制音视频播放器Part1 -新版本ffmpeg,Qt +VS2022,都什么年代了还在写传统播放器?

前言 参考了雷神的自制播放器项目,100行代码实现最简单的基于FFMPEGSDL的视频播放器(SDL1.x) 不过老版本的代码参考意义不大了,我现在准备使用Qt VS2022 FFmpeg59重写这部分代码,具体的代码仓库如下: …

ubuntu20.04搭建nginx rtmp视频服务到指定位置解决权限不足

1.安装依赖 apt-get install build-essential libpcre3 libpcre3-dev libssl-dev2.建一个目录 mldir rtmp_nginx 3.源码下载 wget http://nginx.org/download/nginx-1.21.6.tar.gz wget https://github.com/arut/nginx-rtmp-module/archive/master.zip4.解压缩 tar -xf ng…

https 协议

什么是 Https 协议 HTTPS 也是⼀个应⽤层协议. 是在 HTTP 协议的基础上引⼊了⼀个加密层。HTTP 协议内容都是按照⽂本的⽅式明⽂传输的. 这就导致在传输过程中出现⼀些被篡改的情况。HTTPS 通过使用协议加密通信,可以保护数据在传输过程中的安全性,防止…

前端vue2如何处理Rss订阅、聚合,前端 vue2 如何处理xml 格式的数据

文章目录 前言解决 前言 最近看见csdn有Rss订阅这个功能&#xff0c;但发现这个接口响应的数据格式不是常用的Json格式而是xml&#xff0c;即下图的格式。 附响应的代码 <?xml version"1.0" encoding"utf-8" ?><rss version"2.0"&g…

微软开源Garnet高性能缓存服务安装

Garnet介绍 Garnet是一款微软研究院基于C#开发而开源的高性能缓存服务&#xff0c;支持Windows、Linux多平台部署&#xff0c;Garnet兼容Redis服务API&#xff0c;在性能和使用架构上较Redis有很大提升&#xff08;官方说法&#xff09;&#xff0c;并提供与Redis一样的命令操…

UE5的渲染-太难了

大家可以看到&#xff0c;这些都是UE的渲染&#xff0c;非常漂亮惊叹&#xff0c;渲染已经非常成熟&#xff0c;这些画面并不是离线渲染&#xff0c;而是实时渲染。早先年我们渲染CG动画都采用离线渲染&#xff0c;要用到庞大的渲染农场&#xff0c;每渲染一帧都可能需要半个小…

WebGIS航线编辑器(无人机航线规划)

无人机航点、航线规划&#xff0c;实现全自动航点飞行作业及飞行航拍。禁飞区、作业区功能保障飞行安全。 GIS引擎加载 const viewer new Cesium.Viewer("cesiumContainer", { imageryProvider: new Cesium.IonImageryProvider({ assetId: 3872 }), }); const im…

【Django实战一】创建新项目

一、新建Project django-admin startproject 项目名称二、创建应用 1、创建应用 python manage.py startapp 应用名称应用创建后&#xff0c;项目的根目录下会生成对应应用名称的文件夹 2、注册应用 新创建的应用需要在settings.py中的INSTALLED_APPS中注册该应用 INSTALL…

应急救援装备无人机是否必要?无人机在应急救援中的具体应用案例有哪些?

无人机&#xff08;Drone&#xff09;是一种能够飞行并自主控制或远程操控的无人驾驶飞行器。它们通常由航空器、控制系统、通讯链路和电源系统组成&#xff0c;并可以根据任务需求搭载不同类型的传感器、摄像头、货物投放装置等设备。 无人机的种类繁多&#xff0c;从大小、形…

基于python+vue的幼儿园管理系统flask-django-php-nodejs

随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种活动信息、课程信息、菜谱信息、通知公告、家…

Docker专题-04 Nginx部署

Docker专题-04 Nginx部署 注&#xff1a; 本教程由羞涩梦整理同步发布&#xff0c;本人技术分享站点&#xff1a;blog.hukanfa.com 转发本文请备注原文链接&#xff0c;本文内容整理日期&#xff1a;2024-03-21 csdn 博客名称&#xff1a;五维空间-影子&#xff0c;欢迎关注…

本地化语音识别、视频翻译和配音工具:赋能音频和视频内容处理

随着人工智能技术的飞速发展&#xff0c;语音识别、视频翻译和配音等任务已经变得更加容易和高效。然而&#xff0c;许多现有的工具和服务仍然依赖于互联网连接&#xff0c;这可能会导致延迟、隐私问题和成本问题。为了克服这些限制&#xff0c;我们介绍了一种本地化、离线运行…

MATLAB环境下基于健康指标(Health indicator)的齿轮故障诊断

基于数据驱动的健康指标HI根据其构建策略的不同&#xff0c;常被分成两类&#xff0c;即&#xff1a;有量纲的物理指标和无量纲的虚拟指标。 有量纲的物理指标通常是由信号处理技术对收集到的时频域信号进行分析得到&#xff0c;常见的时域指标有均方根值、峰值指标、峰值因子…

docker swarm 集群创建

1&#xff0c;目的&#xff1a; 通过docker swarm 工具将一台或者多台安装了docker的服务器组成一个完整的集群&#xff0c;该集群中的node节点可以通过Leader节点管理。在使用docker stack部署时&#xff0c;可以将容器自动分发到合适的节点上。 2&#xff0c;服务器准备&am…

0基础学习VR全景平台篇第146篇:为什么需要3D元宇宙编辑器?

一.什么是3D元宇宙编辑器&#xff1f; 3D元宇宙编辑器是全新3DVR交互渲染创作工具&#xff0c;集3D建模、虚拟展厅、AI数字人等能力&#xff0c;渲染和虚拟现实技术于一身的生产力工具。 具有跨平台和随时随地编辑等特点&#xff0c;可广泛应用于展会、展厅、博物馆、可视化园…