👍👎😰❤️

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Arya - 在线 Markdown 编辑器

Arya,是一款基于 VueVditor,为未来而构建的在线 Markdown 编辑器;轻量且强大:内置粘贴 HTML 自动转换为 Markdown,支持流程图、甘特图、时序图、任务列表,可导出携带样式的图片、PDF、微信公众号特制的 HTML 等等。

微注Arya 另一大优点在于:编辑内容只会在您本地进行保存,不会上传您的数据至服务器,绝不窥测用户个人隐私,可放心使用;GitHub 源码:markdown-online-editor,部分功能仍在开发🚧,敬请期待。

背景初衷:早期就有关注到由黑客派所出品的 Vditor:一款为未来而构建的下一代 Markdown 编辑器。然,现而今市面上所存在的 Markdown 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费...),因此基于自身所需,加之 Vditor 的强大,就诞生了做一款在线 Markdown 编辑器 的念头;取其名曰 Arya(二丫)


什么是 Markdown

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

1. 制作待办事宜 Todo 列表

  • 🎉 通常 Markdown 解析器自带的基本功能;
  • 🍀 支持流程图甘特图时序图任务列表
  • 🏁 支持粘贴 HTML 自动转换为 Markdown;
  • 💃🏻 支持插入原生 Emoji、设置常用表情列表;
  • 🚑 支持编辑内容保存本地存储,防止意外丢失;
  • 📝 支持实时预览,主窗口大小拖拽,字符计数;
  • 🛠 支持常用快捷键(Tab),及代码块添加复制
  • ✨ 支持导出携带样式的 PDF、PNG、JPEG 等;
  • ✨ 升级 Vditor,新增对 echarts 图表的支持;
  • ✨ 注入 RevealJs,增设对 PPT 预览支持;
  • 🚧 支持转换 Markdown 到微信特制的 HTML
  • 🚧 内置多种漂亮样式,并且支持用户自定义
  • 🚧 支持检查并格式化 Markdown 语法,使其专业;

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

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

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

4. 高效绘制流程图

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

5. 高效绘制序列图

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!
AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

6. 高效绘制甘特图

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

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

7. 绘制表格

作品名称在线地址上线日期
倾城之链https://nicelinks.site2017-09-20
晚晴幽草轩https://jeffjade.com2014-09-20
静轩之别苑http://quickapp.lovejade.cn2019-01-12

8. 更详细语法说明

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

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


相关链接

微信公众号前端微信群推荐 Web 应用
😉 静晴轩✨ 大前端联盟🎉 倾城之链
静晴轩倾城之链倾城之链