「Javascript」解析markdown為html——鏈接和代碼塊篇

1 前言

markdown是一種十分優秀的標記語言，用來記錄筆記十分方便，可以專注于內容，盡可能少地把精力放在樣式調整上。在markdown中插入圖片、超鏈接和代碼塊比富文本編輯方便不少。在這里記錄一下將markdown的鏈接和代碼塊解析為html的JavaScript方法。

2 分析

2.1 圖片

markdown：

![圖片描述](圖片鏈接)

在markdown中，一般的圖片格式以"!“開頭，”[ ]“內包裹對圖片的描述，”( )"內包裹圖片鏈接。除此之外，如果希望修改圖片樣式，可以使用html格式的img標簽插入圖片。

html：

<img src="圖片鏈接" alt="圖片描述">

2.2 超鏈接

markdown：

[文字描述](網址)

html：

<a href="網址">文字描述</a>

2.3 代碼塊

markdown：

```cpp
#include<iostream>
using namespace std;
int main(){
	return 0;
}
```

html：

<pre><code>#include&lt;iostream&gt;
using&nbsp;namespace&nbsp;std;
int&nbsp;main(){
&emsp;&emsp;return&nbsp;0;
}</code></pre>

在html中無法正常顯示">", "<"等符號，需要使用轉義字符，幾個常用的符號：

符號	轉義
>	>
<	&lt;
"	&quot;

3 代碼

3.1 圖片和超鏈接

function parseMdlink(str) {
	var links = str.match(/!?\[.+?\]\(https?:\/\/.+\)/g);// 解析出圖片和超鏈接文本
	if (links != null) {
		for (var i = 0; i < links.length; i++) {
			var text_link = links[i].match(/[^!\[\(\]\)]+/g);//提取文字和鏈接
			if (links[i][0] == "!") { str = str.replace(links[i], "<img src=\"" + text_link[1] + "\" loading=\"lazy\" alt=\"" + text_link[0] + "\" />"); }//解析圖片
			else { str = str.replace(links[i], "<a href=\"" + text_link[1] + "\">" + text_link[0] + "</a>"); }//解析超鏈接
		}
	}
	return str;
}

3.2 代碼塊

function parseMdcode(block){
    var block_html=""//記錄代碼塊的html文本
    var codetype = block.split("\n")[0].replace("```", "");	/* 代碼語言類型 */
	if (codetype == "") { codetype = "less"; }//沒有聲明格式的代碼塊
	var code = block.replace(/```.*\n/g, "").replace(/```/g, "");	/* 代碼塊本體 */
	var line_num = code.split("\n").length;	/* 代碼的行數 */
	block_html += "<pre><code class=\"language-" + codetype + "\">" + replaceSpecialsymbol(code) + "</code></pre>";
}

其中用到了函數replaceSpecialsymbol()；這是用于將特殊符號轉為轉義字符的函數：

function replaceSpecialsymbol(string) {
	return string.replace(/\&/g, "&amp").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/\x20/g, "&ensp;").replace(/\t/g, "&ensp;&ensp;&ensp;&ensp;");
}