在线 Markdown 编辑器

什么是 Markdown

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


1. 制作待办事宜 Todo 列表

点我展开看代码

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

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

$$ E=mc^2 $$


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;

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!

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

7. 支持图表

Tip

可能在博客内无法正常预览

显示效果应该是这样:
显示效果

点我展开看代码

```echarts
{
  "backgroundColor": "#212121",
  "title": {
    "text": "访问来源",
    "subtext": "2019 年 6 月份",
    "x": "center",
    "textStyle": {
      "color": "#f2f2f2"
    }
  },
  "tooltip": {
    "trigger": "item",
    "formatter": "{a} 
{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://nav.buxiantang.top/ 2024-07
卜仙堂 https://buxiantang.top/ 2024-05
Markerdown https://markdown.buxiantang.top/ 2024-07

9. 折叠代码块

<details>
  <summary>点我展开看代码</summary>
  <pre><code>
# 在这里写折叠的代码
  </code></pre>
</details>

10. 更详细语法说明

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

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

最新更新于 204.7.18