自己动手开发更好用的markdown编辑器-07(扩展语法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
* GFM Inline Grammar
*/

inline.gfm = merge({}, inline.normal, {
escape: replace(inline.escape)('])', '~|])')(),
url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
del: /^~~(?=\S)([\s\S]*?\S)~~/,
toc: /\s*\[TOC\]/,
text: replace(inline.text)
(']|', '~]|')
('|', '|https?://|')
()
});

1
2
3
4
5
6
7
8
9
10

Renderer.prototype.toc = function (items) {
var html = '<div id="toc" class="toc"><ul class="toc-tree">';
html += items;
html += '</ul></div>';
return html;
}

Renderer.prototype.tocItem = function (id, level, text) {
return '<li class="toc-item toc-level-' + level + '"><a class="toc-link" href="#' + id + '"><span class="toc-number"></span> <span class="toc-text">' + text + '</span></a></li>';
};

1
2
3
4
5
6
7
8
9

Renderer.prototype.heading = function(text, level, raw) {
var escapedText = text.toLowerCase();
return '<h' + level + '><a name="' +
escapedText +
'" class="anchor" href="#' +
escapedText +
'"><span class="header-link"></span></a>' +
text + '</h' + level + '>';
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
* Parse Loop
*/

Parser.prototype.parse = function (src) {
var me = this, tocItems = '';
//预生成好目录标签
src.forEach(function (token) {
if (token.type == 'heading') {
id = token.text.toLowerCase();
tocItems += me.renderer.tocItem(id, token.depth, token.text);
}
});
this.inline = new InlineLexer(src.links, this.options, this.renderer);
this.inline.tocHTML = me.renderer.toc(tocItems);

this.tokens = src.reverse();

var out = '';
while (this.next()) {
out += this.tok();
}

return out;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
* Lexing/Compiling
*/

InlineLexer.prototype.output = function(src) {
var out = ''
, link
, text
, href
, cap;
while (src) {
//toc语法
if (cap = this.rules.toc.exec(src)) {
src = src.substring(cap[0].length);
out += this.tocHTML;
continue;
}
...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**
* GFM Inline Grammar
*/

inline.gfm = merge({}, inline.normal, {
escape: replace(inline.escape)('])', '~|])')(),
url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
del: /^~~(?=\S)([\s\S]*?\S)~~/,
emoji: /^:([A-Za-z0-9_\-\+]+?):/,
toc: /\s*\[TOC\]/,
text: replace(inline.text)
(']|', ':~]|')
('|', '|https?://|')
()
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Renderer.prototype.emoji = function (emoji) {
//图片使用自己的七牛空间
return '<img src="'
+ 'http://7xj6bw.com1.z0.glb.clouddn.com/'
+ encodeURIComponent(emoji)
+ '.png"'
+ ' alt=":'
+ escape(emoji)
+ ':"'
+ ' title=":'
+ escape(emoji)
+ ':"'
+ ' class="emoji" align="absmiddle" height="20" width="20">';
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**
* Lexing/Compiling
*/

InlineLexer.prototype.output = function(src) {
var out = ''
, link
, text
, href
, cap;
while (src) {
...
// emoji (gfm)
if (cap = this.rules.emoji.exec(src)) {
src = src.substring(cap[0].length);
out += this.renderer.emoji(cap[1]);
continue;
}
...
}

1
2
3
4
5
6
7
8
9
10
11
12
13

...
,    toc = 'toc'
,    emoji = 'emoji'
..
..
var hrRE = /^([*\-=_])(?:\s*\1){2,}\s*$/
,   ulRE = /^[*\-+]\s+/
,   olRE = /^[0-9]+\.\s+/
,   taskListRE = /^\[(x| )\](?=\s)/ // Must follow ulRE or olRE
,   atxHeaderRE = /^#+/
,   tocRE = /\[TOC\]/
,   emojiRE = /^:([A-Za-z0-9_\-\+]+?):/
..

1
2
3
4
5
6
7

...
} else if(match = stream.match(tocRE)){
return toc;
} else if(match = stream.match(emojiRE)){
return emoji;
}
...

1
2
3
4
5
6

.cm-toc{
background:#ccc;
}
.cm-emoji{
color:#F7A21B;
}