「Javascript」解析markdown为html——链接和代码块篇

「Javascript」解析markdown为html——链接和代码块篇

• • 1 前言
  • 2 分析
  • • 2.1 图片
    • 2.2 超链接
    • 2.3 代码块
  • 3 代码
  • • 3.1 图片和超链接
    • 3.2 代码块

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;");
}