Usage
欢迎使用 Markdown在线编辑器 MdEditor
Markdown是一种轻量级的「标记语言」
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面,Markdown文件的后缀名便是“.md”
MdEditor是一个在线编辑Markdown文档的编辑器
MdEditor扩展了Markdown的功能(如表格、脚注、内嵌HTML等等),以使让Markdown转换成更多的格式,和更丰富的展示效果,这些功能原初的Markdown尚不具备。
Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如
Pandoc,Pandao;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。
MdEditor源于Pandao的JavaScript开源项目,开源地址Editor.md,并在MIT开源协议的许可范围内进行了优化,以适应广大用户群体的需求。向优秀的markdown开源编辑器原作者Pandao致敬。
MdEditor的功能列表演示
# 标题H1 ## 标题H2 ### 标题H3 #### 标题H4 ##### 标题H5 ###### 标题H5
字符效果和横线等
删除线 删除线(开启识别HTML标签时)
斜体字 斜体字
粗体 粗体
粗斜体 粗斜体
上标:X2,下标:O2
缩写(同HTML的abbr标签)
即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启
The HTML specification is maintained by the W3C.
引用 Blockquotes
引用文本 Blockquotes
引用的行内混合 Blockquotes
引用:如果想要插入空白换行
即<br />标签
,在插入处先键入两个以上的空格然后回车即可,普通链接。
锚点与链接 Links
普通链接
普通链接带标题
直接链接:https://www.mdeditor.com
[锚点链接][anchor-id]
[anchor-id]: https://www.mdeditor.com/
mailto:test.test@gmail.com
GFM a-tail link @pandao
邮箱地址自动链接 test.test@gmail.com www@vip.qq.com
@pandao
多语言代码高亮 Codes
行内代码 Inline code
执行命令:npm install marked
缩进风格
即缩进四个空格,也做为实现类似 <pre>
预格式化文本 ( Preformatted Text ) 的功能。
<?php echo "Hello world!"; ?>
预格式化文本:
| First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell |
JS代码
function test() { console.log("Hello world!"); }
HTML 代码 HTML codes
<!DOCTYPE html> <html> <head> <mate charest="utf-8" /> <meta name="keywords" content="Editor.md, Markdown, Editor" /> <title>Hello world!</title> <style type="text/css"> body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;} ul{list-style: none;} img{border:none;vertical-align: middle;} </style> </head> <body> <h1 class="text-xxl">Hello world!</h1> <p class="text-green">Plain text</p> </body> </html>
图片 Images
图片加链接 (Image + Link):
Follow your heart.
列表 Lists
无序列表(减号)Unordered Lists (-)
- 列表一
- 列表二
- 列表三
无序列表(星号)Unordered Lists (*)
- 列表一
- 列表二
- 列表三
无序列表(加号和嵌套)Unordered Lists (+)
- 列表一
- 列表二
- 列表二-1
- 列表二-2
- 列表二-3
- 列表三
- 列表一
- 列表二
- 列表三
有序列表 Ordered Lists (-)
- 第一行
- 第二行
- 第三行
GFM task list
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
绘制表格 Tables
项目 | 价格 | 数量 |
---|---|---|
计算机 | $1600 | 5 |
手机 | $12 | 12 |
管线 | $1 | 234 |
First Header | Second Header |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
First Header | Second Header |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
Function name | Description |
---|---|
help() | Display the help window. |
destroy() | Destroy your computer! |
Left-Aligned | Center Aligned | Right Aligned |
---|---|---|
col 3 is | some wordy text | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Item | Value |
---|---|
Computer | $1600 |
Phone | $12 |
Pipe | $1 |
特殊符号 HTML Entities Codes
© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
[========]
Emoji表情 😃
Blockquotes ⭐
GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
- [x] 😃 @mentions, 😃 #refs, links, formatting, and
tagssupported :editormd-logo:; - [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [x] [ ] 😃 this is a complete item 😃;
- [ ] []this is an incomplete item test link :fa-star: @pandao;
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
反斜杠 Escape
*literal asterisks*
[========]
科学公式 TeX(KaTeX)
\[E=mc^2\]
行内的公式\[E=mc^2\]行内的公式,行内的\[E=mc^2\]公式。
\[x > y\]
\[\(\sqrt{3x-1}+(1+x)^2\)\]
\[\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))\]
多行公式:
\displaystyle \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right)
\displaystyle \frac{1}{ \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { 1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi
分页符 Page break
Print Test: Ctrl + P
[========]
绘制流程图 Flowchart
st=>start: 用户登陆 op=>operation: 登陆操作 cond=>condition: 登陆成功 Yes or No? e=>end: 进入后台 st->op->cond cond(yes)->e cond(no)->op
[========]
绘制序列图 Sequence Diagram
Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks!
End
欢迎使用 Cmd Markdown 编辑阅读器
我们理解您需要更便捷更高效的工具记录思想,整理笔记、知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。 您可以使用 Cmd Markdown:
- 整理知识,学习笔记
- 发布日记,杂文,所见所想
- 撰写发布技术文稿(代码支持)
- 撰写发布学术论文(LaTeX 公式支持)
除了您现在看到的这个 Cmd Markdown 在线版本,您还可以前往以下网址下载:
Windows/Mac/Linux 全平台客户端
请保留此份 Cmd Markdown 的欢迎稿兼使用说明,如需撰写新稿件,点击顶部工具栏右侧的 新文稿 或者使用快捷键
Ctrl+Alt+N
。
什么是 Markdown
Markdown 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档:譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题,分割不同的段落,粗体 或者 斜体 某些文字,更棒的是,它还可以
1. 制作一份待办事宜 Todo 列表
- [ ] 支持以 PDF 格式导出文稿
- [ ] 改进 Cmd 渲染算法,使用局部渲染技术提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能
2. 书写一个质能守恒公式1
\[E=mc^2\]
3. 高亮一段代码2
@requires_authorization class SomeClass: pass if __name__ == '__main__': # A comment print 'hello world'
4. 高效绘制 流程图
st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op
5. 高效绘制 序列图
Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!
6. 高效绘制 甘特图
title 项目开发流程 section 项目确定 需求分析 :a1, 2016-06-22, 3d 可行性报告 :after a1, 5d 概念验证 : 5d section 项目实施 概要设计 :2016-07-05 , 5d 详细设计 :2016-07-08, 10d 编码 :2016-07-15, 10d 测试 :2016-07-22, 5d section 发布验收 发布: 2d 验收: 3d
7. 绘制表格
项目 | 价格 | 数量 |
---|---|---|
计算机 | $1600 | 5 |
手机 | $12 | 12 |
管线 | $1 | 234 |
8. 更详细语法说明
想要查看更详细的语法说明,可以参考我们准备的 Cmd Markdown 简明语法手册,进阶用户可以参考 Cmd Markdown 高阶语法手册 了解更多高级功能。
总而言之,不同于其它 所见即所得 的编辑器:你只需使用键盘专注于书写文本内容,就可以生成印刷级的排版格式,省却在键盘和工具栏之间来回切换,调整内容和格式的麻烦。Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。 目前它已经成为世界上最大的技术分享网站 GitHub 和 技术问答网站 StackOverFlow 的御用书写格式。
什么是 Cmd Markdown
您可以使用很多工具书写 Markdown,但是 Cmd Markdown 是这个星球上我们已知的、最好的 Markdown 工具——没有之一 :)因为深信文字的力量,所以我们和你一样,对流畅书写,分享思想和知识,以及阅读体验有极致的追求,我们把对于这些诉求的回应整合在 Cmd Markdown,并且一次,两次,三次,乃至无数次地提升这个工具的体验,最终将它演化成一个 编辑/发布/阅读 Markdown 的在线平台——您可以在任何地方,任何系统/设备上管理这里的文字。
1. 实时同步预览
我们将 Cmd Markdown 的主界面一分为二,左边为编辑区,右边为预览区,在编辑区的操作会实时地渲染到预览区方便查看最终的版面效果,并且如果你在其中一个区拖动滚动条,我们有一个巧妙的算法把另一个区的滚动条同步到等价的位置,超酷!
2. 编辑工具栏
也许您还是一个 Markdown 语法的新手,在您完全熟悉它之前,我们在 编辑区 的顶部放置了一个如下图所示的工具栏,您可以使用鼠标在工具栏上调整格式,不过我们仍旧鼓励你使用键盘标记格式,提高书写的流畅度。
3. 编辑模式
完全心无旁骛的方式编辑文字:点击 编辑工具栏 最右侧的拉伸按钮或者按下 Ctrl + M
,将 Cmd Markdown 切换到独立的编辑模式,这是一个极度简洁的写作环境,所有可能会引起分心的元素都已经被挪除,超清爽!
4. 实时的云端文稿
为了保障数据安全,Cmd Markdown 会将您每一次击键的内容保存至云端,同时在 编辑工具栏 的最右侧提示 已保存
的字样。无需担心浏览器崩溃,机器掉电或者地震,海啸——在编辑的过程中随时关闭浏览器或者机器,下一次回到 Cmd Markdown 的时候继续写作。
5. 离线模式
在网络环境不稳定的情况下记录文字一样很安全!在您写作的时候,如果电脑突然失去网络连接,Cmd Markdown 会智能切换至离线模式,将您后续键入的文字保存在本地,直到网络恢复再将他们传送至云端,即使在网络恢复前关闭浏览器或者电脑,一样没有问题,等到下次开启 Cmd Markdown 的时候,她会提醒您将离线保存的文字传送至云端。简而言之,我们尽最大的努力保障您文字的安全。
6. 管理工具栏
为了便于管理您的文稿,在 预览区 的顶部放置了如下所示的 管理工具栏:
通过管理工具栏可以:
发布:将当前的文稿生成固定链接,在网络上发布,分享
新建:开始撰写一篇新的文稿
删除:删除当前的文稿
导出:将当前的文稿转化为 Markdown 文本或者 Html 格式,并导出到本地
列表:所有新增和过往的文稿都可以在这里查看、操作
模式:切换 普通/Vim/Emacs 编辑模式
7. 阅读工具栏
通过 预览区 右上角的 阅读工具栏,可以查看当前文稿的目录并增强阅读体验。
工具栏上的五个图标依次为:
目录:快速导航当前文稿的目录结构以跳转到感兴趣的段落
视图:互换左边编辑区和右边预览区的位置
主题:内置了黑白两种模式的主题,试试 黑色主题,超炫!
阅读:心无旁骛的阅读模式提供超一流的阅读体验
全屏:简洁,简洁,再简洁,一个完全沉浸式的写作和阅读环境
8. 阅读模式
在 阅读工具栏 点击 或者按下 Ctrl+Alt+M
随即进入独立的阅读模式界面,我们在版面渲染上的每一个细节:字体,字号,行间距,前背景色都倾注了大量的时间,努力提升阅读的体验和品质。
9. 标签、分类和搜索
在编辑区任意行首位置输入以下格式的文字可以标签当前文档:
标签: 未分类
标签以后的文稿在【文件列表】(Ctrl+Alt+F)里会按照标签分类,用户可以同时使用键盘或者鼠标浏览查看,或者在【文件列表】的搜索文本框内搜索标题关键字过滤文稿,如下图所示:
10. 文稿发布和分享
在您使用 Cmd Markdown 记录,创作,整理,阅读文稿的同时,我们不仅希望它是一个有力的工具,更希望您的思想和知识通过这个平台,连同优质的阅读体验,将他们分享给有相同志趣的人,进而鼓励更多的人来到这里记录分享他们的思想和知识,尝试点击 (Ctrl+Alt+P) 发布这份文档给好友吧!
再一次感谢您花费时间阅读这份欢迎稿,点击 (Ctrl+Alt+N) 开始撰写新的文稿吧!祝您在这里记录、阅读、分享愉快!
作者 @ghosert
2016 年 07月 07日