小趙同學
0%

Markdown

发表于 更新于

Markdown是非常棒以及流行的写作语法，平文本，「易读易写」

基础语法

Markdown是非常棒以及流行的写作语法，平文本，「易读易写」，一般只需几分钟就能学会Markdown的基本用法。

分隔符More

1
<!-- more -->

标题:

1
2
3
4
5
6
7
## 标题:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

分别对应HTML中的<h1>一级标题</h1>，以此类推。

用两个星号标记起来，表示加粗，一个星号，表示斜体，这样子表示删除，这些就是最基本的语法了。

1
**用两个星号标记起来，表示加粗**，*一个星号，表示斜体*，~~这样子表示删除~~，这些就是最基本的语法了。

插入链接

插入链接:
这是一个 链接

1
这是一个 [链接](http://url.com/)

快速链接:
只需要在网址头尾用尖括号包裹即可，比如http://url.com

1
只需要在网址头尾用尖括号包裹即可，比如<http://url.com>

邮箱链接:
这是一个 myname@example.com 邮箱的链接。

1
这是一个 <myname@example.com> 邮箱的链接。

MarkEditor特别支持:
Google (target=_blank id=google_link) 其中内容括号内的target=_blank id=google_link 会自动扩展到最终 HTML 对应 A 标签下的属性，另外，google.com 作为一个域名，不需要补全http://, 最终会自动补全。

1
[Google (target=_blank id=google_link)](google.com)  其中内容括号内的`target=_blank id=google_link` 会自动扩展到最终 HTML 对应 A 标签下的属性，另外，`google.com` 作为一个域名，不需要补全`http://`, 最终会自动补全。

列表

无序列表:

  • Red
  • Green
  • Blue
1
2
3
4
**无序列表:**
- Red
- Green
- Blue

有序列表则使用数字接着一个英文句点：

  1. Bird
  2. McHale
  3. Parish
1
2
3
1.  Bird
2.  McHale
3.  Parish

也可以混合在一起使用:

  • Bird
    • blue bird
  • McHale
    1. a man
    2. HoustonRockets
  • Parish
1
2
3
4
5
6
- Bird
    - blue bird
- McHale
    1. a man
    2. HoustonRockets
- Parish

分割线

-加上空格组成，三个以上:

1
- - - - - -

样式修饰: 居中、色彩、字体大小 .etc

在当前行的末尾添加(英文)中括号，可以对当前行进行额外的样式修正: [center]
也可以是多个关键词一起，比如: [center red 20px]

修饰的关键词有如下类型:

  • center (或 middle)、left、right，表示居中、居左、居右
  • n% 表示缩放， 200% 表示放大到 2 倍
  • 小数点 (如x.y) 表示行高
  • 整数 表示字体大小
  • 颜色值 (如 blue #333) 表示字体色
  • @颜色值 (如 @red @#888888) 表示背景色

除以上规则之外，如果有一个不能匹配的关键词，则认为是字体，比如 [15 red arial] 认为是合理的修饰，而[15 red arial more] 则认为是不合理的修饰，会返回原始文字。

注释

// 这是 MarkEditor 的特别支持!
/// 多了一个/，也是注释，但最终注释内容不会出现在源码中。
注释后的内容，最终会以 HTML 的注释格式<!--我是内容-->存在，不会显示在正文中，但包含在 HTML 的源码中；如果是/// 开头的，则也不包括在源码中。

内容引用

用>放在段首，之后是空格，输入文字:

你
一会看我
一会看云

我觉得
你看我时很远
你看云时很近

1
2
3
4
5
6
7
> 你
> 一会看我
> 一会看云

>  我觉得
>  你看我时很远
>  你看云时很近

插入图片

插入图片的语法跟插链接很像，在MarkEditor中，一般可以通过拖拽的方式进行插图，不一定会看到这个语法，而可能直接看到图片本身。

插图语法:
图片的alt信息，可空

1
![图片的alt信息，可空](图片的url)

特别支持:
图片的alt信息，可空的形式中，如果图片的 url 不是 Web 地址，而是本地的指向，则后面跟上?r=90&w=100&h=100，可以设定图片的尺寸。其中 r 表示缩放90%, w 表示最大宽度 (像素)，h 表示最大高度。r、w、h 并不需要全部进行声明，按需则可。
如果是图片直接在编辑区域内可见(非 Markdown 语法显示)，双击图片，可以直接进行调整。

代码高亮语法

通过fenced code的方式(代码块的头尾被三个反引号包裹)，然后声明代码语言类型，即可实现代码高亮。不仅仅是最终的HTML预览会处理代码高亮，实时输入的过程中也是高亮的。

1
2
3
​```python
s = 'hello world'
​```
1
s = 'hello world'

代码语言的类型后面跟上:n，则最终在渲染为HTML(预览)的时候，代码块会标示行数。

1
2
3
​```python:n
s = 'hello world'
​```
1
s = 'hello world'

代码高亮示例

MarkEditor支持超过300种代码类型的高亮，以下是一些示例:

1
2
3
4
5
​```python
from settings import world
if world == 'mine':
   kept =  keep(world)
​```
1
2
3
from settings import world
if world == 'mine':
   kept =  keep(world)
1
2
3
4
5
​```ruby
sum = 1 + 2
a, b = 1, 2
1 > 2 ? true : false; puts 'Hi'
​```
1
2
3
sum = 1 + 2
a, b = 1, 2
1 > 2 ? true : false; puts 'Hi'
1
2
3
4
5
​```swift
import Cocoa
let a = 4
var s = "Hello " + "World!"
​```
1
2
3
import Cocoa
let a = 4
var s = "Hello " + "World!"
1
2
3
4
5
6
7
8
​```js
var express = require('express');
var app = express();
app.get('/', function(req, res){
  res.send('hello world');
});
app.listen(3000);
​```
1
2
3
4
5
6
var express = require('express');
var app = express();
app.get('/', function(req, res){
  res.send('hello world');
});
app.listen(3000);

表格

MarkEditor 不仅是更易于输入表格，还能自动生成线图、柱状图、饼图……

MarkEditor风格的表格语法

1
2
3
4
5
6
​```table
项目        |      价格    |    描述
尺子        |      ￥2      |   说明内容，也可为空
本子        |      ￥8     (描述偷懒不写完第三项也可以，不会破坏表格结构)   
Tip        |      ￥18    |  **光标在表格区域时，右键点击，有更简单的“编辑表格”命令**
​```
1
2
3
4
项目        |      价格    |    描述
尺子        |      ￥2      |   说明内容，也可为空
本子        |      ￥8     (描述偷懒不写完第三项也可以，不会破坏表格结构)   
Tip        |      ￥18    |  **光标在表格区域时，右键点击，有更简单的“编辑表格”命令**

第一行是表格的第一栏，每个项的文本中可以追加(-)、(>)、(<)来实现某列内的文本对齐，它们也分别等同于(center)、(right)、(left)。

1
2
3
4
5
​```table
项目(-)     |      价格(>)    |    描述(<)  
尺子        |      ￥20         |   ?         
本子        |      ￥8 
​```
1
2
3
项目(-)     |      价格(>)    |    描述(<)  
尺子        |      ￥20         |   ?         
本子        |      ￥8

自定义补全缺失的字符

1
2
3
4
5
​```table:我是缺失的补全
项目        |      价格    |    描述
尺子        
本子        
​```
1
2
3
项目        |      价格    |    描述
尺子        
本子

表格会自动补全缺失的列，这样一来，尺子和本子的价格、描述就全部是我是缺失的补全了。

自动制图语法

MarkEditor 支持三种类型的制图，声明 table 的时候，后面加上 line、pie、bar三者之一即可。
比如下面的 Demo (具体效果，可以查看预览)

柱状图

最简单的一个图表:

1
2
3
4
​```table:bar
衬衫   |   羊毛衫   |   雪纺衫   |   裤子   |   高跟鞋   |   袜子
15   |   20   |   36   |   10   |   10   |   20
​```
1
2
衬衫   |   羊毛衫   |   雪纺衫   |   裤子   |   高跟鞋   |   袜子
15   |   20   |   36   |   10   |   10   |   20

也可以是横向的:

1
2
3
4
5
6
7
8
9
​```table:bar
品类   |  数量
衬衫   |   15
羊毛衫   |   20  
雪纺衫  |  36
裤子 |  10
高跟鞋 | 10
袜子 |   20
​```
1
2
3
4
5
6
7
品类   |  数量
衬衫   |   15
羊毛衫   |   20  
雪纺衫  |  36
裤子 |  10
高跟鞋 | 10
袜子 |   20

还可以是这种横纵两个维度的:

1
2
3
4
5
6
7
​```table:bar
季度 | 衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子
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
​```
1
2
3
4
5
季度 | 衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子
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即可。

饼图

最简单的一个图表:

1
2
3
4
​```table:pie
衬衫   |   羊毛衫   |   雪纺衫   |   裤子   |   高跟鞋   |   袜子
15   |   20   |   36   |   10   |   10   |   20
​```
1
2
衬衫   |   羊毛衫   |   雪纺衫   |   裤子   |   高跟鞋   |   袜子
15   |   20   |   36   |   10   |   10   |   20

也可以是横向的:

1
2
3
4
5
6
7
8
9
​```table:pie
品类   |  数量
衬衫   |   15
羊毛衫   |   20  
雪纺衫  |  36
裤子 |  10
高跟鞋 | 10
袜子 |   20
​```
1
2
3
4
5
6
7
品类   |  数量
衬衫   |   15
羊毛衫   |   20  
雪纺衫  |  36
裤子 |  10
高跟鞋 | 10
袜子 |   20

自动归档:

1
2
3
4
5
6
7
8
9
​```table:pie
品类   |  数量
衬衫(衣服)   |   15
羊毛衫(衣服)   |   20  
雪纺衫(衣服)  |  36
裤子 |  10
高跟鞋(鞋袜) | 10
袜子(鞋袜) |   20
​```
1
品类   |  数量衬衫(衣服)   |   15羊毛衫(衣服)   |   20  雪纺衫(衣服)  |  36裤子 |  10高跟鞋(鞋袜) | 10袜子(鞋袜) |   20

Meta

1
2
3
4
5
6
7
8
9
---
date: 2015-01-10 19:55
layout: 'post'
tags:
    - "hello"
    - 'ruby'
status: 'public'
categories : [lessons, beginner]
---

如上所示，首行以---开始，内部使用yaml格式，并最终以---单独一行结束的，会最终解析为文章的元信息(描述性信息)，一般Jekyll、Hexo等静态博客用得比较多。

另外，MarkEditor的Markdown解析，也支持FarBox的简洁性Meta声明，就是首行开始，每行用key: value格式进行声明的，其中key必须是英文名。

比如

1
2
3
4
5
date: 2015-01-10 19:55
layout: 'post'
title: 'Blogging Like a Hacker'

然后这里是正文的开始...

CSS

Markdown 最终会解析为 HTML，本身会采用 p、blockquote、ul、li 等 DOM 类型来表达文本的结构。在实际使用情况中，仅仅这些结构不足以满足排版的需要，因此，MarkEditor 在解析 Markdown 的时候，会进行一定结构性推断，赋予当前 DOM 元素一定的 class name，来标识潜在的文本语义结构。
那么，完成最终页面排版的 CSS 样式，就可以根据这些 css name，来实现更复杂一些的排版。

基本段落、行

  • md_block 表示段落，一般(源文本中)两个空行会产生段落的分割

  • md_line 表示行

  • md_line_dom_embed 当前行是以<开头，>结尾的，则认为内部有其它 HTML 元素

  • md_line_with_image 当前行包含图片，且位于行首

  • md_line_start 位于段落的首行

  • md_line_end 位于段落的尾行

  • only_img_before 上一行包含图片，且仅为图片

  • blockquote_lines_n 在 blockquot 这个 DOM 类型中，其中 n 为整数，表示当前的 blockquote 内有几行

  • h16, H1-H6 都会有这个额外的 css name

段落块

md_has_block_below

Dom 类型: P
作用: 表示紧跟其后的将是ul、ol、blockquote、img的元素。
特别说明: 如果后面是ul，则跟md_has_block_below同时出现的有md_has_block_below_ul; ol、blockquote、img也由此可推。

md_block_as_opening

如果当前段，仅有一行，且行尾出现的是：(中文冒号) 或者 :(英文冒号)，并且紧跟其后的将是ul、ol、blockquote、img的元素，那么这段落生成的 HTML 结构中，会有一个 class name 为 md_block_as_opening。

代码相关

  • highlight, 表示当前代码类型会进行高亮的对应

  • code_lang_xxx, 其中 xxx 类似 python 等具体的语言，表示当前代码高亮的语言类型

  • with_lines, 表示显示行数

  • lang_xxx, 其中 xxx 为具体的语言类型，DOM 类型为 pre，表示未能对应高亮的代码块

列表项

todo_item

Dom 类型: LI
作用: [x] done & [ ] undone 这个Markdown 语法产生的。
特别说明: 如果是 unone 的状态，还会同时拥有一个 class todo_undone_item； 反之已完成的则是 todo_done_item。

图片相关

md_scaled_image

Dom类型: IMG
作用: 如果图片实在 MarkEditor 中缩放过的，则会有这个 class。

img_before

Dom类型: P
作用: 当前 P 元素的前一个Dom元素是图片

x2_image

Dom 类型: IMG
作用: 如果一个图片的 src，末尾是@2x的，则会有这个 class 对应。

x3_image

类似x2_image

x4_image

类似x2_image

其它

toc

Dom 类型: DIV
作用: [TOC]语法产生的 HTML 片段，由<div class="toc"">进行包裹。

仅限 ME

此处的规则仅限于 MarkEditor 中的预览、富文本导出逻辑，在其它场景下，会无效。

  • md_block_section: 每个 HTML 片段构建的时候，会外部包括一个 section，其 class name
  • md_block_section_for_xx: 如果当前 HTML 片段为 ul，则其也会有一个 class name 为 md_block_section_for_ul

flowchart

MarkEditor风格的流程图语法

流程图的语法规则实际上是基于http://adrai.github.io/flowchart.js/实现的，只要申明语言类型为flow即可。
但是我们认为原始插件的语法有些晦涩，所以在兼容原有语法的基础上，又重新进行了演绎，效果如下:

1
2
3
4
5
6
7
8
9
10
11
​```flow
st: 起始
register: 注册
condition: 好人?
check: 盘查一下
end: 终了

st > condition
condition(y) > register > end
condition(n) > check > register
​```
1
2
3
4
5
6
7
8
9
st: 起始
register: 注册
condition: 好人?
check: 盘查一下
end: 终了

st > condition
condition(y) > register > end
condition(n) > check > register

原始语法(示例)

更多请参考http://adrai.github.io/flowchart.js/

1
2
3
4
5
6
7
8
9
10
​```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
​```
1
2
3
4
5
6
7
8
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

mermaid

MarkEditor 也同样支持 mermaid 的语法。

注意: 不恰当的格式，会导致 mermaid 的渲染卡住整个 MarkEditor，要特别注意不要出现中文状态下的的某些字符，比如中文问号、中文括号。

1
2
3
4
5
6
7
8
​```mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
​```
1
2
3
4
5
6
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
​```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
​```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

Other

TOC

1
[TOC]

[TOC]

如上所示，单独一行的[TOC]，最终会被解析为当前文章的 内容目录。

PDF分页

导出PDF需要在指定位置强制分页的，可以单独一行输入[PAGE]。

数学公式

使用插入代码的方式，但是需要声明语言为mathjax，示例如下:

1
2
3
​```mathjax
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
​```
1
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
1
2
3
​```mathjax
E = mc^2
​```
1
E = mc^2

脚注

1
2
3
4
5
6
7
8
9
10
11
12
> 你
> 一会看我
> 一会看云

>  我觉得
>  你看我时很远
>  你看云时很近

这首诗的作者是顾城[^gucheng]的《远和近》。
其中`[^gucheng]`就是脚注的声明，你可以在文末对这个关键标注进行说明。除此之外，在标注内容上点击鼠标右键，可以让光标在标注、最终补充的(脚注)内容进行快速跳转。

[^gucheng]: 顾城，童话诗人，以及坏掉了的人。

你
一会看我
一会看云

我觉得
你看我时很远
你看云时很近

这首诗的作者是顾城^gucheng的《远和近》。
其中[^gucheng]就是脚注的声明，你可以在文末对这个关键标注进行说明。除此之外，在标注内容上点击鼠标右键，可以让光标在标注、最终补充的(脚注)内容进行快速跳转。