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

news2024/7/4 5:16:46

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.coloradmin.cn/o/1533171.html

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

相关文章

区域规划(Regional Planning)的学习笔记

目录 一、概念题 1.区域的概念、类型、特性 2.区域分析的概念、主要内容 3.自然环境、自然资源的概念 4.区域自然资源评价的内容 5.可持续发展理论定义 6.经济增长、经济结构定义 7.产业结构概念 8.人口增长分析的含义、指标 9.技术进步概念、类型 10.技术进步对区域…

小侃威胁情报

0x01 什么是情报 百度百科释义: 情报“有情有报告的信息”,学者从情报搜集的手段来给其下定义,说情报是通过秘密手段搜集来的、关于敌对方外交军事政治经济科技等信息。还有学者从情报处理的流程来给其下定义,认为情报是被传递、整…

Vue响应式原理全解析

前言 大家好,我是程序员蒿里行。浅浅记录一下面试中的高频问题,请你谈一下Vue响应式原理。 必备前置知识,​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。 什么是响应式 响应式本质是当…

[隐私计算实训营学习笔记] 第1讲 数据要素流通

信任四基石 数据的分级分类 技术信任:全链路审计、闭环完成的数据可信流通体系 技术信任:开启数据密态时代 数据可流通的基础设施:密态天空计算

react ant design radio group, 自定义modal样式,radio样式

需求&#xff1a; modal 里面需要一个list 列表&#xff0c;列表有单选框&#xff0c;并且可以确认。 遇到的问题&#xff1a;自定义modal的样式&#xff0c;修改radio/ radio group 的样式 设计图如下&#xff1a; 代码&#xff1a; return (<Modaltitle"Duplica…

7.PWM开发SG90(手把手教会)

简介 PWM&#xff0c;英文名Pulse Width Modulation&#xff0c;是脉冲宽度调制缩写&#xff0c;它是通过对一系列脉冲的宽度进 行调制&#xff0c;等效出所需要的波形&#xff08;包含形状以及幅值&#xff09;&#xff0c;对模拟信号电平进行数字编码&#xff0c;也就是说通…

Transformer的前世今生 day02(神经网络语言模型、词向量)

神经网络语言模型 使用神经网络的方法&#xff0c;去完成语言模型的两个问题&#xff0c;下图为两层感知机的神经网络语言模型&#xff1a; 假设词典V内有五个词&#xff1a;“判断”、“这个”、“词”、“的”、“词性”&#xff0c;且要输出P(w_next | “判断”、“这个”、…

李国武:如何评估一家精益制造咨询公司的实施能力?

在制造业转型升级的大背景下&#xff0c;精益制造已成为企业提升竞争力、实现可持续发展的关键。然而&#xff0c;面对市场上众多的精益制造咨询公司&#xff0c;如何评估其实施能力成为了众多企业的难题。本文将从多个方面为大家揭示评估精益制造咨询公司实施能力的方法&#…

软考网工学习笔记(6) 广域通信网

公共交换电话网&#xff08;pstn&#xff09; 在pstn是为了语音通信而建立的网络。从20世纪60你年代开始用于数据传输 电话网有三个部分组成&#xff1a; 本地回路 &#xff0c;干线 和 交换机 。 干线 和 交换机 一般采用数字传输和交换技术 &#xff0c;而 本地回路基本采…

Tomcat介绍,Tomcat服务部署

目录 一、Tomcat 介绍 二、Tomcat 核心技术和组件 2.1、Web 容器&#xff1a;完成 Web 服务器的功能 2.2、Servlet 容器&#xff0c;名字为 catalina&#xff0c;用于处理 Servlet 代码 2.3、JSP 容器&#xff1a;用于将 JSP 动态网页翻译成 Servlet 代码 Tomcat 功能组件…

【自然语言处理】NLP入门(八):1、正则表达式与Python中的实现(8):正则表达式元字符:.、[]、^、$、*、+、?、{m,n}

文章目录 一、前言二、正则表达式与Python中的实现1、字符串构造2、字符串截取3、字符串格式化输出4、字符转义符5、字符串常用函数6、字符串常用方法7、正则表达式1. .&#xff1a;表示除换行符以外的任意字符2. []&#xff1a;指定字符集3. ^ &#xff1a;匹配行首&#xff0…

蓝桥杯练习题总结(二)dfs题、飞机降落、全球变暖

一、飞机降落 问题描述&#xff1a; N架飞机准备降落到某个只有一条跑道的机场。其中第 i 架飞机在 时刻到达机场上空&#xff0c;到达时它的剩余油料还可以继续盘旋 个单位时间&#xff0c;即它最早可以于 1, 时刻开始降落&#xff0c;最晚可以于时刻开始降落。降落过程需要个…

mysql笔记:24. 主从同步环境搭建

文章目录 主从同步的基本原理主从同步的搭建步骤1. 环境准备2. 配置主服务器&#xff08;Master&#xff09;3. 配置从服务器&#xff08;Slave&#xff09;4. 测试配置5. 常见故障5.1. 主从服务器上的MySQL版本不一致导致失败&#xff1f;5.2. Slave_IO_Running状态异常&#…

AI颠覆教学系统,ChatGPT对应试教育会带来哪些挑战?

ChatGPT爆火两个月&#xff0c;整个教育系统都在被颠覆。在全美范围内&#xff0c;许多大学教授、系主任和管理人员&#xff0c;都在对课堂进行大规模的调整&#xff0c;以应对ChatGPT对教学活动造成的巨大冲击。 我们的传统中高考选出的分霸&#xff0c;是更能吃苦&#xff0…

开发技术-FeignClient 对单个接口设置超时时间

1. 背景 FeignClient 调用某个接口&#xff0c;3s 没有结果就需要停止&#xff0c;处理后续业务。 2. 方法 FeignClient 自定义 name 属性 FeignClient(name "aaa" , url "xxx") public interface TestApi {ResponseBodyPOSTMapping(value "xx…

设计模式之抽象工厂模式解析

抽象工厂模式 1&#xff09;问题 工厂方法模式中的每个工厂只生产一类产品&#xff0c;会导致系统中存在大量的工厂类&#xff0c;增加系统的开销。 2&#xff09;概述 a&#xff09;产品族 和 产品等级结构 产品等级结构&#xff1a;产品的继承结构&#xff1b; 产品族&…

TnT-LLM: Text Mining at Scale with Large Language Models

TnT-LLM: Text Mining at Scale with Large Language Models 相关链接&#xff1a;arxiv 关键字&#xff1a;Large Language Models (LLMs)、Text Mining、Label Taxonomy、Text Classification、Prompt-based Interface 摘要 文本挖掘是将非结构化文本转换为结构化和有意义的…

Java开发---上海得帆(一面)

面试感受 这是我的第一次面试&#xff0c;我感觉我这次面试的很差&#xff0c;很糟糕&#xff0c;十分的糟糕&#xff0c;万分的糟糕。第一次面试&#xff0c;面试了半个小时。我去真的好紧张&#xff0c;脑子里一篇空白。脑子空白还不是最惨的&#xff0c;最惨的是那个八股文…

使用Lerna搭建业务组件库

Lerna基本概念 Lerna 是一个用来优化托管在 git\npm 上的多 package 代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目&#xff0c;从而解决了多个包互相依赖&#xff0c;且发布时需要手动维护多个包的问题。 主要功能&#xff1a; 为单个包或多个包运行命令 …

【GPT概念-03】:人工智能中的注意力机制

说明 注意力机制生成分数&#xff08;通常使用输入函数&#xff09;&#xff0c;确定对每个数据部分的关注程度。这些分数用于创建输入的加权总和&#xff0c;该总和馈送到下一个网络层。这允许模型捕获数据中的上下文和关系&#xff0c;而传统的固定序列处理方法可能会遗漏这…