在 TypeScript 中使用 Markdown：库、解析器和工具

Markdown 与 TypeScript 简介

Markdown 是一种轻量级标记语言，广泛用于文档、README 文件、博客和聊天中的文本格式化。TypeScript 作为 JavaScript 的强类型超集，能够创建可靠且可扩展的 Markdown 处理应用程序。在 pythonlib.ru 网站上，我们将介绍在 TypeScript 中处理 Markdown 的最佳库和工具、它们的功能以及使用示例。

流行的 Markdown 解析库

有几种成熟的解决方案可将 Markdown 转换为 HTML 或其他格式。我们来看三种最流行的：

• marked — 快速轻量的解析器，支持 GFM（GitHub 风格的 Markdown）语法。内置 TypeScript 类型。
• showdown — 通用的 Markdown 到 HTML 转换器，支持扩展和自定义。
• unified（与 remark 包一起使用） — 基于 AST（抽象语法树）的现代 Markdown 处理生态系统。不仅可以解析，还可以分析、转换和格式化 Markdown。

安装与配置

首先通过 npm 安装其中一个库。以 marked 为例：

npm install markednpm install @types/marked --save-dev

对于 unified 与 remark，需要多个包：

npm install unified remark-parse remark-htmlnpm install @types/unified @types/remark-parse

示例：使用 marked 解析 Markdown

创建一个简单的函数，将 Markdown 字符串转换为 HTML：

import { marked } from 'marked';

function renderMarkdown(mdContent: string): string {    return marked.parse(mdContent);}

const md = `# 标题

这是**粗体**文本和_斜体_。`;const html = renderMarkdown(md);console.log(html);// 输出：<h1>标题</h1>// <p>这是 <strong>粗体</strong>文本和 <em>斜体</em>。</p>

通过 unified + remark 处理 AST

unified 库允许在树级别处理 Markdown。这对于分析文档结构、提取标题或转换链接非常有用。

import { unified } from 'unified';import remarkParse from 'remark-parse';import remarkHtml from 'remark-html';

async function mdToHtml(mdContent: string): Promise<string> {    const file = await unified()        .use(remarkParse)        .use(remarkHtml)        .process(mdContent);    return String(file);}

const md = `## 二级标题

列表：- 项目 1- 项目 2`;mdToHtml(md).then(console.log);// 输出：<h2>二级标题</h2>// <p>列表：</p>// <ul>// <li>项目 1</li>// <li>项目 2</li>// </ul>

创建带语法高亮的 Markdown 编辑器

对于教育网站，实现一个交互式编辑器很有用，用户在其中编写 Markdown，右侧可以预览带语法高亮的 HTML。我们使用 marked 和 highlight.js 来实现代码块的高亮：

import { marked } from 'marked';import hljs from 'highlight.js';

// 配置 marked 使用 highlight.jsmarked.setOptions({    highlight: (code: string, lang: string) => {        if (lang && hljs.getLanguage(lang)) {            return hljs.highlight(code, { language: lang }).value;        }        return code; // 如果未指定语言或未找到    }});

function previewMarkdown(mdContent: string): string {    return marked.parse(mdContent);}

// 在浏览器中的使用示例（textarea 的 input 事件）const textarea = document.getElementById('editor'