简介

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 块预览了