这是一款浏览器端的 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

今天的文章就到这里啦，喜欢的小伙伴可以体验一下（不要忘记点）我们下期再见~