JavaScript构建一个Markdown解析器

我是猪头少年，一名软件开发者，产品为Material Design Theme 和 Winsaa
Material Design Theme 是一个基于最新的 Material Design效果实现的主题，专用于Vscode
Winsaa 是一个专注于Windows系统，记录和分析每天屏幕软件使用情况的软件
想要了解更多可以访问我的个人网站：scung.cn

Markdown是一种轻量级标记语言，以简单易读的语法和可生成丰富多彩的内容，受到开发者们的青睐。无论是文档编写，还是博客传记都广泛使用到Markdown。本文介绍试用JavaScript来构建一个Markdown解析器，解锁Markdown的强大之处。

什么是Markdown解析器

Markdown解析器的就是讲Markdown文本解析之后转换成HTML格式，供给浏览器渲染页面。例如文本中 # 标题 会被转换成 <h1>标题</h1> 形式的代码。

解析器基本实现

要想解析Markdown文本，首先要先提取出Markdown文本中各类标记，可以使用正则来获取，例如 /^# (.*$)/gim 可以获取到所有的 # 标题 标记，再将其替换成对应的HTML代码。

function parseMarkdown(markdown) {
    // 转换标题
    markdown = markdown.replace(/^# (.*$)/gim, '<h1>$1</h1>');
    markdown = markdown.replace(/^## (.*$)/gim, '<h2>$1</h2>');
    markdown = markdown.replace(/^### (.*$)/gim, '<h3>$1</h3>');

    // 转换加粗
    markdown = markdown.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');

    // 转换斜体
    markdown = markdown.replace(/\*(.*?)\*/gim, '<em>$1</em>');

    // 转换链接
    markdown = markdown.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>');

    // 换行处理
    markdown = markdown.replace(/\n/gim, '<br />');

    return markdown.trim();
}

// 测试 Markdown 文本
const markdownText = `
# 欢迎使用 Markdown 解析器
## 副标题
这是 **加粗** 和 *斜体* 的示例。
[点击访问](https://scung.cn)
`;

console.log(parseMarkdown(markdownText));

上面的代码中 parseMarkdown 就是我们定义的Markdown解析器，内部通过使用 replace 方法进行内容的替换，替换的依据使用正则表达式来判断，完成了Markdown的基本解析

<h1>欢迎使用 Markdown 解析器</h1>
<br />
<h2>副标题</h2>
<br />
这是 <strong>加粗</strong> 和 <em>斜体</em> 的示例。
<br />
<a href="https://scung.cn">点击访问</a>
<br />

实现代码高亮

首先我们定义一个自定义解析代码的解析器，然后我们可以引入外部库，使用 highlight.js 实现代码高亮。

function parseCodeBlocks(markdown) {
    return markdown.replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>');
}

结合上 highlight.js

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
    let code = '```let code = 1;```';

    let codeBlock = parseCodeBlocks(code);

    //将codeBlock插入到页面后调用代码高亮
    hljs.highlightAll();
</script>

构建一个 Markdown 解析器从简单正则到功能全面的扩展，可以灵活适配不同场景。对于小型项目，手动实现基础解析已足够；而大型项目中，结合库和工具则更高效。