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

Type	Description
document	Root node
heading	# through ######
paragraph	Text block
code_block	Fenced (```) or indented
block_quote	> prefixed
list	Ordered or bullet list
item	List item
thematic_break	---, ***, ___

Inline Elements

Type	Description
text	Plain text
emph	*italic* or _italic_
strong	**bold** or __bold__
code	`inline`
link	[text](url)
image	
softbreak	Line break in source
hardbreak	Two spaces + newline

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