在线 Markdown 编辑器在线 Markdown 编辑器

# 欢迎使用在线 Vditor Markdown 编辑器

[vditor](https://vditor.vercel.app) 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。您可以使用Vditor Markdown:

> * 整理知识,学习笔记
> * 发布日记,杂文,所见所想
> * 撰写发布技术文稿(代码支持)
> * 撰写发布学术论文(LaTeX 公式支持)

![Vditor-markdown-logo](https://b3logfile.com/tag/Vditor-PE4wB9G.png?imageView2/2/w/96/h/96/q/100)
--------------------

## 如何使用

**微注**:清空目前这份默认文档,即处于可使用态。[vditor](https://vditor.vercel.app) 另一大优点在于:编辑内容只会在您本地进行保存,不会上传您的数据至服务器,**绝不窥测用户个人隐私,可放心使用**;Github 源码:[markdown-online-editor](https://github.com/nicejade/markdown-online-editor),部分功能仍在开发🚧,敬请期待。

默认为[所见即所得](https://hacpai.com/article/1577370404903?utm_source=github.com)模式,可通过 `⌘-⇧-M``Ctrl-⇧-M`)进行切换;或通过以下方式:

- 所见即所得:`⌘-⌥-7``Ctrl-alt-7`);
- 即时渲染:`⌘-⌥-8``Ctrl-alt-8`);
- 分屏渲染:`⌘-⌥-9``Ctrl-alt-9`);

### PPT 预览

如果您用作 `PPT` 预览(入口在`设置`中),需要注意,这里暂还不能支持各种图表的渲染;您可以使用 `---` 来定义水平方向上幻灯片,用 `--` 来定义垂直幻灯片;更多设定可以参见 [RevealJs 文档](https://github.com/hakimel/reveal.js#table-of-contents)

---

## 什么是 Markdown

[Markdown](https://nicelinks.site/tags/Markdown/?utm_source=markdown.lovejade.cn) 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号,以最小的输入代价,生成极富表现力的文档:譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题,分割不同的段落,**粗体***斜体* 或者[超文本链接](https://vue-cli3.lovejade.cn/explore/),更棒的是,它还可以:

---

### 1. 制作待办事宜 `Todo` 列表

- [x] 🎉 通常 `Markdown` 解析器自带的基本功能;
- [x] 🍀 支持**流程图****甘特图****时序图****任务列表**
- [x] 🏁 支持粘贴 HTML 自动转换为 Markdown;
- [x] 💃🏻 支持插入原生 Emoji、设置常用表情列表;
- [x] 🚑 支持编辑内容保存**本地存储**,防止意外丢失;
- [x] 📝 支持**实时预览**,主窗口大小拖拽,字符计数;
- [x] 🛠 支持常用快捷键(**Tab**),及代码块添加复制
- [x] ✨ 支持**导出**携带样式的 PDF、PNG、JPEG 等;
- [x] ✨ 升级 Vditor,新增对 `echarts` 图表的支持;
- [x] 👏 支持检查并格式化 Markdown 语法,使其专业;
- [x] 🦑 支持五线谱、及[部分站点、视频、音频解析](https://github.com/b3log/vditor/issues/117?utm_source=hacpai.com#issuecomment-526986052)
- [x] 🌟 增加对**所见即所得**编辑模式的支持(`⌘-⇧-M`);

---

### 2. 书写一个质能守恒公式[^LaTeX]

$$
E=mc^2
$$

---

### 3. 高亮一段代码[^code]

```js
// 给页面里所有的 DOM 元素添加一个 1px 的描边(outline);
[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16);
})

```

### 4. 高效绘制[流程图](https://github.com/knsv/mermaid#flowchart)

```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

```

### 5. 高效绘制[序列图](https://github.com/knsv/mermaid#sequence-diagram)

```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!

```

### 6. 高效绘制[甘特图](https://github.com/knsv/mermaid#gantt-diagram)

> **甘特图**内在思想简单。基本是一条线条图,横轴表示时间,纵轴表示活动(项目),线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比。

```mermaid
gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2019-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2019-07-05 , 5d
详细设计 :2019-07-08, 10d
编码 :2019-07-15, 10d
测试 :2019-07-22, 5d
section 发布验收
发布: 2d
验收: 3d

```

### 7. 支持图表

```echarts
{
"backgroundColor": "#212121",
"title": {
"text": "「云生博客」访问来源",
"subtext": "2020 年 6 月份",
"x": "center",
"textStyle": {
"color": "#f2f2f2"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"left": "left",
"data": [
"搜索引擎",
"直接访问",
"推荐",
"其他",
"社交平台"
],
"textStyle": {
"color": "#f2f2f2"
}
},
"series": [
{
"name": "访问来源",
"type": "pie",
"radius": "55%",
"center": [
"50%",
"60%"
],
"data": [
{
"value": 10440,
"name": "搜索引擎",
"itemStyle": {
"color": "#ef4136"
}
},
{
"value": 4770,
"name": "直接访问"
},
{
"value": 2430,
"name": "推荐"
},
{
"value": 342,
"name": "其他"
},
{
"value": 18,
"name": "社交平台"
}
],
"itemStyle": {
"emphasis": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}
]
}

```

> **备注**:上述 echarts 图表📈,其数据,须使用严格的 **JSON** 格式;您可使用 JSON.stringify(data),将对象传换从而得标准数据,即可正常使用。

### 8. 绘制表格

| 作品名称 | 在线地址 | 上线日期 | | :-------- | :----- | :----: | | 云生博客 | [https://www.qikaile.tk](https://www.qikaile.tk) |2020-03-14| | 网站监控 | [https://tjys.now.sh](https://tjys.now.sh) |2020-05-16| | 云生网盘 | [https://tjys.cf](https://tjys.cf) |2021-05-16|

### 9. 更详细语法说明

想要查看更详细的语法说明,可以参考这份 [Markdown 资源列表](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/markdown-tutorial.md),涵盖入门至进阶教程,以及资源、平台等信息,能让您对她有更深的认知。

总而言之,不同于其它*所见即所得*的编辑器:你只需使用键盘专注于书写文本内容,就可以生成印刷级的排版格式,省却在键盘和工具栏之间来回切换,调整内容和格式的麻烦。**Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。** 目前它已经成为世界上最大的技术分享网站 `GitHub` 和 技术问答网站 `StackOverFlow` 的御用书写格式,而且越发流行,正在在向各行业渗透。

最新更新于 2019.08.21

欢迎使用在线 Vditor Markdown 编辑器

vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。您可以使用Vditor Markdown:

  • 整理知识,学习笔记
  • 发布日记,杂文,所见所想
  • 撰写发布技术文稿(代码支持)
  • 撰写发布学术论文(LaTeX 公式支持)

如何使用

微注:清空目前这份默认文档,即处于可使用态。vditor 另一大优点在于:编辑内容只会在您本地进行保存,不会上传您的数据至服务器,绝不窥测用户个人隐私,可放心使用;Github 源码:markdown-online-editor,部分功能仍在开发🚧,敬请期待。

默认为所见即所得模式,可通过 ⌘-⇧-MCtrl-⇧-M)进行切换;或通过以下方式:

  • 所见即所得:⌘-⌥-7Ctrl-alt-7);
  • 即时渲染:⌘-⌥-8Ctrl-alt-8);
  • 分屏渲染:⌘-⌥-9Ctrl-alt-9);

PPT 预览

如果您用作 PPT 预览(入口在设置中),需要注意,这里暂还不能支持各种图表的渲染;您可以使用 --- 来定义水平方向上幻灯片,用 -- 来定义垂直幻灯片;更多设定可以参见 RevealJs 文档


什么是 Markdown

Markdown 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号,以最小的输入代价,生成极富表现力的文档:譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题,分割不同的段落,粗体斜体 或者超文本链接,更棒的是,它还可以:


1. 制作待办事宜 Todo 列表

  • 🎉 通常 Markdown 解析器自带的基本功能;
  • 🍀 支持流程图甘特图时序图任务列表
  • 🏁 支持粘贴 HTML 自动转换为 Markdown;
  • 💃🏻 支持插入原生 Emoji、设置常用表情列表;
  • 🚑 支持编辑内容保存本地存储,防止意外丢失;
  • 📝 支持实时预览,主窗口大小拖拽,字符计数;
  • 🛠 支持常用快捷键(Tab),及代码块添加复制
  • ✨ 支持导出携带样式的 PDF、PNG、JPEG 等;
  • ✨ 升级 Vditor,新增对 echarts 图表的支持;
  • 👏 支持检查并格式化 Markdown 语法,使其专业;
  • 🦑 支持五线谱、及部分站点、视频、音频解析
  • 🌟 增加对所见即所得编辑模式的支持(⌘-⇧-M);

2. 书写一个质能守恒公式[^LaTeX]


3. 高亮一段代码[^code]

// 给页面里所有的 DOM 元素添加一个 1px 的描边(outline); [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16); })

4. 高效绘制流程图

A
B
C
D

5. 高效绘制序列图

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

6. 高效绘制甘特图

甘特图内在思想简单。基本是一条线条图,横轴表示时间,纵轴表示活动(项目),线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比。

2019-06-232019-06-302019-07-072019-07-142019-07-212019-07-28需求分析       可行性报告     概念验证       概要设计      详细设计      编码          测试          发布验收项目确定项目实施发布验收项目开发流程

7. 支持图表

备注:上述 echarts 图表📈,其数据,须使用严格的 JSON 格式;您可使用 JSON.stringify(data),将对象传换从而得标准数据,即可正常使用。

8. 绘制表格

作品名称在线地址上线日期
云生博客https://www.qikaile.tk2020-03-14
网站监控https://tjys.now.sh2020-05-16
云生网盘https://tjys.cf2021-05-16

9. 更详细语法说明

想要查看更详细的语法说明,可以参考这份 Markdown 资源列表,涵盖入门至进阶教程,以及资源、平台等信息,能让您对她有更深的认知。

总而言之,不同于其它所见即所得的编辑器:你只需使用键盘专注于书写文本内容,就可以生成印刷级的排版格式,省却在键盘和工具栏之间来回切换,调整内容和格式的麻烦。Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。 目前它已经成为世界上最大的技术分享网站 GitHub 和 技术问答网站 StackOverFlow 的御用书写格式,而且越发流行,正在在向各行业渗透。

最新更新于 2019.08.21