Commonmark

CommonMark Markdown

Quick Start

import { Parser, HtmlRenderer } from 'commonmark';

const parser = new Parser();
const renderer = new HtmlRenderer();

const ast = parser.parse('# Hello\n\nWorld');
const html = renderer.render(ast);

AST Node Types

Block Elements

Inline Elements

Walking the AST

const walker = ast.walker();
let event;
while ((event = walker.next())) {
  const { node, entering } = event;
  if (node.type === 'heading' && entering) {
    console.log(`H${node.level}: ${node.firstChild?.literal}`);
  }
}

Key Parsing Rules

• Blank line separates paragraphs
• 4-space indent = code block (unless in list)
• Fenced code: 3+ backticks, optional info string
• Setext headings: === or --- underline
• Links: [text](url "title") or [text][ref]

Extensions (GFM)

GitHub Flavored Markdown adds:

• Tables: | col | col |
• Strikethrough: ~~text~~
• Task lists: - [ ] and - [x]
• Autolinks: URLs become links automatically

Tips

• Use node.literal for text content
• Use node.destination for link/image URLs
• node.info contains fenced code language
• Modify AST before rendering for transformations