MarkEditor的Markdown语法
Markdown是非常棒以及流行的写作语法，平文本，「易读易写」，一般只需几分钟就能学会Markdown的基本用法。
标题:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
分别对应HTML中的<h1>一级标题</h1>，以此类推。
用两个星号标记起来，表示加粗，一个星号，表示斜体，这样子表示删除，这些就是最基本的语法了。
插入链接
插入链接:
这是一个 链接
快速链接:
只需要在网址头尾用尖括号包裹即可，比如http://url.com
另外一种插链接的语法:
这是一个 [链接][link_key]，然后，在文档的任何一行中(通常在文档末尾比较合适)，对这个链接进行定义，比如:
[link_key]: http://the_url.com/
邮箱链接:
这是一个 myname@example.com 邮箱的链接。
MarkEditor特别支持:
Google (target=_blank id=google_link) 其中内容括号内的target=_blank id=google_link 会自动扩展到最终 HTML 对应 A 标签下的属性，另外，google.com 作为一个域名，不需要补全http://, 最终会自动补全。
插入图片
插入图片的语法跟插链接很像，在MarkEditor中，一般可以通过拖拽的方式进行插图，不一定会看到这个语法，而可能直接看到图片本身。
常见的插图语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puc7Pore-1600499716908)(图片的url)]
另一种插图语法:
![alt text][image_id]
[image_id]: 图片的url
MarkEditor特别支持:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8myMc5Jh-1600499716911)(图片的url)]的形式中，如果图片的 url 不是 Web 地址，而是本地的指向，则后面跟上?r=90&w=100&h=100，可以设定图片的尺寸。其中 r 表示缩放90%, w 表示最大宽度 (像素)，h 表示最大高度。r、w、h 并不需要全部进行声明，按需则可。
如果是图片直接在编辑区域内可见(非 Markdown 语法显示)，则按住 Command 键 (Windows 版为 Ctrl 键)再点击图片，可以直接进行调整。
列表
无序列表:
- Red
- Green
- Blue
有序列表则使用数字接着一个英文句点：
- Bird
- McHale
- Parish
也可以混合在一起使用:
- Bird
- blue bird
- McHale
- a man
- HoustonRockets
- Parish
居中与居右
单独一行的时候，[文本内容]表示居中对齐，[文本内容]]表示居右(右侧再多一个])，其它默认情况下都是居左。
[我是居中的文本]
[我是居右的文本]]
内容引用
用>放在段首，之后是空格，输入文字:
你
一会看我
一会看云
我觉得
你看我时很远
你看云时很近
分割线
-加上空格组成，三个以上:
注释
// 这是 MarkEditor 的特别支持!
/// 多了一个/，也是注释，但最终注释内容不会出现在源码中。
注释后的内容，最终会以 HTML 的注释格式<!--我是内容-->存在，不会显示在正文中，但包含在 HTML 的源码中；如果是///开头的，则也不包括在源码中。
代码高亮语法
通过fenced code的方式(代码块的头尾被三个反引号包裹)，然后声明代码语言类型，即可实现代码高亮。不仅仅是最终的HTML预览会处理代码高亮，实时输入的过程中也是高亮的。
s = 'hello world'
代码语言的类型后面跟上:n，则最终在渲染为HTML(预览)的时候，代码块会标示行数。
s = 'hello world'
代码高亮示例
MarkEditor支持超过300种代码类型的高亮，以下是一些示例:
from settings import world
if world == 'mine':
kept = keep(world)
sum = 1 + 2
a, b = 1, 2
1 > 2 ? true : false; puts 'Hi'
import Cocoa
let a = 4
var s = "Hello " + "World!"
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('hello world');
});
app.listen(3000);
MarkEditor 不仅是更易于输入表格，还能自动生成线图、柱状图、饼图……
MarkEditor风格的表格语法
项目 | 价格 | 描述
尺子 | ￥2 | 说明内容，也可为空
本子 | ￥8 (描述偷懒不写完第三项也可以，不会破坏表格结构)
Tip | ￥18 | **光标在表格区域时，右键点击，有更简单的“编辑表格”命令**
第一行是表格的第一栏，每个项的文本中可以追加(-)、(>)、(<)来实现某列内的文本对齐，它们也分别等同于(center)、(right)、(left)。
项目(-) | 价格(>) | 描述(<)
尺子 | ￥20 | ?
本子 | ￥8
自定义补全缺失的字符
项目 | 价格 | 描述
尺子
本子
表格会自动补全缺失的列，这样一来，尺子和本子的价格、描述就全部是我是缺失的补全了。
自动制图语法
MarkEditor 支持三种类型的制图，声明 table 的时候，后面加上 line、pie、bar三者之一即可。
比如下面的 Demo (具体效果，可以查看预览)
柱状图
最简单的一个图表:
衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子
15 | 20 | 36 | 10 | 10 | 20
也可以是横向的:
品类 | 数量
衬衫 | 15
羊毛衫 | 20
雪纺衫 | 36
裤子 | 10
高跟鞋 | 10
袜子 | 20
还可以是这种横纵两个维度的:
季度 | 衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子
1季度 | 5 | 20 | 36 | 10 | 10 | 21
2季度 | 15 | 20 | 6 | 10 | 10 | 30
3季度上(3季度) | 2 | 2 | 16 | 8 | 6 | 30
3季度下(3季度) | 5 | 2 | 13 | 10 | 9 | 20
注意: 3季度上(3季度) 和 3季度下(3季度)会自动实现归档，合并到同一个柱状图中。
线图
跟柱状图非常类似，只需要将上面柱状图的几个 demo，由table:bar改为table:line即可。
饼图
最简单的一个图表:
衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子
15 | 20 | 36 | 10 | 10 | 20
也可以是横向的:
品类 | 数量
衬衫 | 15
羊毛衫 | 20
雪纺衫 | 36
裤子 | 10
高跟鞋 | 10
袜子 | 20
自动归档:
品类 | 数量
衬衫(衣服) | 15
羊毛衫(衣服) | 20
雪纺衫(衣服) | 36
裤子 | 10
高跟鞋(鞋袜) | 10
袜子(鞋袜) | 20
date: 2015-01-10 19:55
layout: ‘post’
title: ‘Blogging Like a Hacker’
tags:
- “hello”
- ‘ruby’
status: ‘public’
categories : [lessons, beginner]
如上所示，首行以---开始，内部使用yaml格式，并最终以---单独一行结束的，会最终解析为文章的元信息(描述性信息)，一般Jekyll、Hexo等静态博客用得比较多。
另外，MarkEditor的Markdown解析，也支持FarBox的简洁性Meta声明，就是首行开始，每行用key: value格式进行声明的，其中key必须是英文名。
比如
date: 2015-01-10 19:55
layout: 'post'
title: 'Blogging Like a Hacker'
然后这里是正文的开始...
MarkEditor风格的流程图语法
流程图的语法规则实际上是基于http://adrai.github.io/flowchart.js/实现的，只要申明语言类型为flow即可。
但是我们认为原始插件的语法有些晦涩，所以在兼容原有语法的基础上，又重新进行了演绎，效果如下:
原始语法(示例)
脚注
你
一会看我
一会看云
我觉得
你看我时很远
你看云时很近
这首诗的作者是顾城1的《远和近》。
其中[^gucheng]就是脚注的声明，你可以在文末对这个关键标注进行说明。除此之外，在标注内容上点击鼠标右键，可以让光标在标注、最终补充的(脚注)内容进行快速跳转。
TOC
如上所示，单独一行的
[TOC]，最终会被解析为当前文章的内容索引。
PDF分页
导出PDF需要在指定位置强制分页的，可以单独一行输入[PAGE]。
数学公式
使用插入代码的方式，但是需要声明语言为mathjax，示例如下:
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
E = mc^2
div-block
hello world
由于有些时候会因为最终的 HTML 布局，可能需要将某块内容特别标注出来，div-block就是为此目的而生。
如上，最终的 HTML 会用一个 div 的外部对象包裹:
<div class="md_div_block"><div style="text-align:center; color:red">
这里是正常 markdown 解析后的结果，实际上由两个 div 元素组成，一个最外面的有`md_div_block`作为 class，另一个子 div 承载 div-block 头部声明时候的属性。
</div></div><!--md_div_block_ends-->
顾城，童话诗人，以及坏掉了的人。 ↩︎
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
