markdown-js 添加表格，代码块 parse

简介

markdown-js 是将 markdown转换成 HTML 的 JavaScript 库，我再网站中使用它来预览 markdown ，但是发现它对 代码块 和 表格 是不转换的。这么鸡肋的地方居然没有修复，所以需要，在不改变它的 js 文件的情况下，把 代码块 和 表格 的预览加上去。

• jQuery 3.x

代码

////////////////////////////
// code 外加 pre
// 代码中间有空行无法正确 parse
///////////////////////////
var rst = markdown.toHTML($('#new-post-content').val()), mcode = new RegExp(/<code>([a-zA-Z]+)?([^<>]*(\r?\n|\r))+<\/code>/,'gu'), curM = 1;
while(curM !== null){
	// mcode不加g选项,会陷入死循环
	curM = mcode.exec(rst);
	if(curM !== null){
		var lang = curM[1] === undefined ? 'text' : curM[1], cont = curM[2];
		rst = rst.replace(curM[0], '<pre><code class="'+lang+'">'+cont+'</code></pre>');
	}
}
// 中间有空行的
var bcode = new RegExp(/<p><code><\/code>`([a-zA-Z]+)?([^]*)<code><\/code>`<\/p>/,'gu'), curB = 1;
while(curB !== null){
	curB = bcode.exec(rst);
	if(curB !== null){
		var lang = curB[1] === undefined ? 'text' : curB[1], cont = curB[2], cont = cont.replace(/<\/?p>/g, '').replace(/^(\r?\n|\r)/, '');
		rst = rst.replace(curB[0], '<pre><code class="'+lang+'">'+cont+'</code></pre>');
	}
}
///////////////
// 解析 table
///////////////
var tcode = new RegExp(/(\|(?:[^\r\n\|]+\|)+)(?:\r?\n|\r)\|(?:[-—]+\|)+((?:(?:\r?\n|\r)(?:\|(?:[^\n\r\|]+\|)+))+)/,'gu'), curT = 1;
while(curT !== null){
	curT=tcode.exec(rst);
	if(curT !== null){
		console.log(curT[2].split(/\r?\n|\r/));
		var rows = curT[2].split(/\r?\n|\r/).filter(function(a){return a.length === 0 ? false : true;}), rowtrs = '<table><thead><tr><td>'+curT[1].split('|').slice(1,-1).join('</td><td>')+'</td></tr></thead><tbody>';
		console.log(rows);
		for(var i in rows){
			rowtrs += '<tr><td>'+rows[i].split('|').slice(1,-1).join("</td><td>")+'</td></tr>';
		}
		rowtrs += '</tbody></table>';
		rst = rst.replace(curT[0], rowtrs);
	}
};
$('#output').html(rst);

结果

现在可以简单的对表格和多行的 code 块预览了