Trabajo con Markdown en TypeScript: bibliotecas, analizadores y herramientas

Introducción a Markdown y TypeScript

Markdown es un lenguaje de marcado ligero, ampliamente utilizado para formatear texto en documentación, archivos README, blogs y chats. TypeScript, como superconjunto fuertemente tipado de JavaScript, permite crear aplicaciones robustas y escalables para procesar Markdown. En el sitio pythonlib.ru revisaremos las mejores bibliotecas y herramientas para trabajar con Markdown en TypeScript, sus capacidades y ejemplos de uso.

Bibliotecas populares para analizar Markdown

Existen varias soluciones maduras para convertir Markdown a HTML u otros formatos. Consideremos las tres más populares:

\n
• marked — un analizador rápido y ligero con soporte para la sintaxis GFM (GitHub Flavored Markdown). Tiene tipos integrados para TypeScript.
\n
• showdown — un conversor universal de Markdown a HTML con capacidad de extensión y personalización.
\n
• unified (con el paquete remark) — un ecosistema moderno para procesar Markdown basado en AST (árbol de sintaxis abstracta). Permite no solo analizar, sino también inspeccionar, transformar y formatear Markdown.
\n

Instalación y configuración

Para empezar, instale una de las bibliotecas a través de npm. Ejemplo para marked:

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

Para unified con remark se necesitarán varios paquetes:

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

Ejemplo: análisis de Markdown con marked

Creemos una función simple para convertir una cadena Markdown a HTML:

import { marked } from 'marked';\n\nfunction renderMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\nconst md = `# Título\\n\\nEste es texto en **negrita** y _cursiva_.`;\nconst html = renderMarkdown(md);\nconsole.log(html);\n// Salida: <h1>Título</h1>\n// <p>Este es texto en <strong>negrita</strong> y <em>cursiva</em>.</p>

Trabajo con AST mediante unified + remark

La biblioteca unified permite trabajar con Markdown a nivel de árbol. Esto es útil para analizar la estructura del documento, extraer encabezados o transformar enlaces.

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 nivel\\n\\nLista:\\n- Elemento 1\\n- Elemento 2`;\nmdToHtml(md).then(console.log);\n// Salida: <h2>Segundo nivel</h2>\n// <p>Lista:</p>\n// <ul>\n// <li>Elemento 1</li>\n// <li>Elemento 2</li>\n// </ul>

Creación de un editor Markdown con resaltado de sintaxis

Para un sitio educativo, es útil implementar un editor interactivo donde el usuario escriba Markdown y a la derecha vea una vista previa HTML con resaltado de sintaxis. Usaremos marked y highlight.js para resaltar bloques de código:

import { marked } from 'marked';\nimport hljs from 'highlight.js';\n\n// Configuración de 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; // si el idioma no está especificado o no se encuentra\n    }\n});\n\nfunction previewMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\n// Ejemplo de uso en el navegador (evento input en textarea)\nconst textarea = document.getElementById('editor'