Working with Markdown in TypeScript: Libraries, Parsers, and Tools

Introduction to Markdown and TypeScript

Markdown is a lightweight markup language widely used for formatting text in documentation, README files, blogs, and chats. TypeScript, as a strictly typed superset of JavaScript, allows you to create reliable and scalable applications for processing Markdown. On the website pythonlib.ru, we will look at the best libraries and tools for working with Markdown in TypeScript, their capabilities, and usage examples.

Popular Libraries for Parsing Markdown

There are several mature solutions for converting Markdown to HTML or other formats. Let's look at the three most popular ones:

• marked — a fast and lightweight parser with support for GFM (GitHub Flavored Markdown) syntax. It has built-in types for TypeScript.
• showdown — a versatile Markdown to HTML converter with extensibility and customization options.
• unified (with the remark package) — a modern ecosystem for processing Markdown based on AST (Abstract Syntax Tree). It allows not only parsing but also analyzing, transforming, and formatting Markdown.

Installation and Setup

To get started, install one of the libraries via npm. Example for marked:

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

For unified with remark, several packages are required:

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

Example: Parsing Markdown with marked

Let's create a simple function to convert a Markdown string to HTML:

import { marked } from 'marked';

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

const md = `# Heading

This is **bold** text and _italic_.`;const html = renderMarkdown(md);console.log(html);// Output: <h1>Heading</h1>// <p>This is <strong>bold</strong> text and <em>italic</em>.</p>

Working with AST via unified + remark

The unified library allows you to work with Markdown at the tree level. This is useful for analyzing document structure, extracting headings, or transforming links.

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 = `## Second Level

List:- Item 1- Item 2`;mdToHtml(md).then(console.log);// Output: <h2>Second Level</h2>// <p>List:</p>// <ul>// <li>Item 1</li>// <li>Item 2</li>// </ul>

Creating a Markdown Editor with Syntax Highlighting

For an educational website, it is useful to implement an interactive editor where the user writes Markdown and sees a live HTML preview with syntax highlighting on the right. We will use marked and highlight.js for code block highlighting:

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

// Configure marked to use highlight.jsmarked.setOptions({    highlight: (code: string, lang: string) => {        if (lang && hljs.getLanguage(lang)) {            return hljs.highlight(code, { language: lang }).value;        }        return code; // if language is not specified or not found    }});

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

// Example usage in the browser (input event on textarea)const textarea = document.getElementById('editor'