Trabalhando com Markdown em TypeScript: bibliotecas, parsers e ferramentas

Introdução ao Markdown e TypeScript

Markdown é uma linguagem de marcação leve, amplamente utilizada para formatar texto em documentações, arquivos README, blogs e chats. TypeScript, como uma extensão fortemente tipada sobre JavaScript, permite criar aplicações robustas e escaláveis para processamento de Markdown. No site pythonlib.ru, vamos explorar as melhores bibliotecas e ferramentas para trabalhar com Markdown em TypeScript, suas funcionalidades e exemplos de uso.

Bibliotecas populares para parsing de Markdown

Existem várias soluções maduras para converter Markdown em HTML ou outros formatos. Vamos considerar três das mais populares:

\n
• marked — um parser rápido e leve com suporte à sintaxe GFM (GitHub Flavored Markdown). Possui tipos integrados para TypeScript.
\n
• showdown — um conversor versátil de Markdown para HTML com capacidade de extensão e personalização.
\n
• unified (com o pacote remark) — um ecossistema moderno para processamento de Markdown baseado em AST (árvore sintática abstrata). Permite não apenas fazer parsing, mas também analisar, transformar e formatar Markdown.
\n

Instalação e configuração

Para começar, instale uma das bibliotecas via npm. Exemplo para marked:

npm install marked\nnpm install @types/marked --save-dev

Para unified com remark, serão necessários vários pacotes:

npm install unified remark-parse remark-html\nnpm install @types/unified @types/remark-parse

Exemplo: parsing de Markdown com marked

Vamos criar uma função simples para converter uma string Markdown em HTML:

import { marked } from 'marked';\n\nfunction renderMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\nconst md = `# Título\\n\\nEste é um texto **negrito** e _itálico_.`;\nconst html = renderMarkdown(md);\nconsole.log(html);\n// Saída: <h1>Título</h1>\n// <p>Este é um texto <strong>negrito</strong> e <em>itálico</em>.</p>

Trabalhando com AST via unified + remark

A biblioteca unified permite trabalhar com Markdown no nível da árvore. Isso é útil para analisar a estrutura do documento, extrair títulos ou transformar links.

import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkHtml from 'remark-html';\n\nasync function mdToHtml(mdContent: string): Promise<string> {\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkHtml)\n        .process(mdContent);\n    return String(file);\n}\n\nconst md = `## Segundo nível\\n\\nLista:\\n- Item 1\\n- Item 2`;\nmdToHtml(md).then(console.log);\n// Saída: <h2>Segundo nível</h2>\n// <p>Lista:</p>\n// <ul>\n// <li>Item 1</li>\n// <li>Item 2</li>\n// </ul>

Criando um editor Markdown com destaque de sintaxe

Para um site educacional, é útil implementar um editor interativo onde o usuário escreve Markdown e vê uma prévia em HTML com destaque de sintaxe à direita. Usaremos marked e highlight.js para destacar blocos de código:

import { marked } from 'marked';\nimport hljs from 'highlight.js';\n\n// Configuração do marked para usar highlight.js\nmarked.setOptions({\n    highlight: (code: string, lang: string) => {\n        if (lang && hljs.getLanguage(lang)) {\n            return hljs.highlight(code, { language: lang }).value;\n        }\n        return code; // se o idioma não for especificado ou não encontrado\n    }\n});\n\nfunction previewMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\n// Exemplo de uso no navegador (evento input no textarea)\nconst textarea = document.getElementById('editor'