# 欢�使用 `Arya` 在线 Markdown 编辑器



[Arya](https://markdown.lovejade.cn/?utm_source=markdown.lovejade.cn)，是一款基� `Vue`�`Vditor`，为未�而�建的在线 Markdown 编辑器；轻�且强大：内置粘贴 HTML 自动转�为 Markdown，支��程图�甘特图�时�图�任务列表，�导出�带样�的图片�PDF�微信公众�特制的 HTML 等等。



---



## 如何使用



**微注**：清空目�这份默认文档，�处��使用�。[Arya](https://markdown.lovejade.cn/?utm_source=markdown.lovejade.cn) �一大优点在�：编辑内容�会在您本地进行�存，�会上传您的数�至�务器，**��窥测用户个人��，�放心使用**；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": "2019 年 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://nicelinks.site](https://nicelinks.site/??utm_source=markdown.lovejade.cn) |2017-09-20|
| 晚晴幽�轩 | [https://jeffjade.com](https://jeffjade.com/??utm_source=markdown.lovejade.cn) |2014-09-20|
| �轩之别苑 | [http://quickapp.lovejade.cn](http://quickapp.lovejade.cn/??utm_source=markdown.lovejade.cn) |2019-01-12|



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



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



总而言之，���其它*所��所得*的编辑器：你�需使用键盘专注�书写文本内容，就�以生��刷级的�版格�，��在键盘和工具�之间��切�，调整内容和格�的麻烦。**Markdown 在�畅的书写和�刷级的阅读体验之间找到了平衡。** 目�它已��为世界上最大的技术分享网站 `GitHub` 和 技术问答网站 `StackOverFlow` 的御用书写格�，而且越��行，正在在��行业渗�。



最新更新� 2019.08.21

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