commonmark

mcclowes's avatarfrom mcclowes

Use when parsing or generating Markdown following the CommonMark specification - AST structure, block/inline elements, and extensions

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 21, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides a robust implementation for parsing and generating Markdown following the CommonMark specification. It enables developers to interact with Markdown content through an Abstract Syntax Tree (AST), allowing for precise manipulation of block and inline elements, HTML rendering, and support for GitHub Flavored Markdown (GFM) extensions like tables and task lists.

Use Cases

  • Content Transformation: Programmatically traverse and modify Markdown ASTs to update links, reformat headers, or sanitize content before publishing.
  • Web Rendering: Convert Markdown source text into standards-compliant HTML for seamless integration into web applications and CMS platforms.
  • Documentation Automation: Generate structured technical documentation or README files from raw data or code comments using the CommonMark generator.
  • Data Extraction: Parse Markdown files to programmatically extract specific elements such as task lists, code snippets, or metadata for automated workflows.
namecommonmark
descriptionUse when parsing or generating Markdown following the CommonMark specification - AST structure, block/inline elements, and extensions

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 ![alt](src)
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