这是一款浏览器端的 Markdown 编辑器,
哈喽，大家好！我是前端实验室的小师妹!
你知道 Markdown 已经诞生了 18 年么？
时至今日，Markdown 已然成为了写作神器，深受广大程序员和自媒体工作者的喜爱！
今天就给大家介绍一款浏览器端的 Markdown 编辑器，无论是需求开发还是博客写作，你应该能用的上~
1.什么是 Markdown 呢？
维基百科对标记语言的定义是「将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码」。
简单来说，就是用一系列约定俗成的标记，规定文本的格式、结构等，如加粗、分段、字体颜色等，我们熟悉的 HTML 就是一种标记语言。
Vditor 介绍
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。
Vditor编辑器内置了classic，dark 2 套主题，内容上内置了 ant-design, light，dark，wechat 4 套主题；代码风格上内置了 github 等 36 套主题，而且还提供了接口可扩展。
小师妹只有一个字来形容：牛逼！
特性
语法支持
应用场景（编辑模式）
分屏预览：适配传统的 Markdown 使用场景，适合大屏下编辑排版
所见即所得：对不熟悉 Markdown 的用户友好，熟悉 Markdown 的用户也可以无缝使用
即时渲染：理论上这是最为优雅的 Markdown 编辑方式，让熟悉 Markdown 的用户能够更专注于内容创作
使用方式
1.安装依赖
npm install vditor --save
2.引入
import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor(id, {options...})
3.HTML中引入
<!-- ⚠️生产环境请指定版本号，如 https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>
4.实现效果
项目地址
官网地址：https://b3log.org/vditor/ Github地址:https://github.com/Vanessa219/vditor
今天的文章就到这里啦，喜欢的小伙伴可以体验一下（不要忘记点）我们下期再见~
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~