Block nodes represent structural elements in markdown that typically start on a new line. All block nodes are returned from the parse() method.
BlockNode type
type BlockNode =
| TableNode
| ThematicBreakNode
| CodeBlockNode
| HeadingNode
| ParagraphNode
| BlockquoteNode
| ListNode
| HtmlBlockNode;
HeadingNode
Represents ATX-style (# Heading) and Setext-style headings.
interface HeadingNode {
type: "heading";
level: 1 | 2 | 3 | 4 | 5 | 6;
children: Array<InlineNode>;
}
Heading level from 1-6, where 1 is the highest level (e.g., #) and 6 is the lowest (e.g., ######)
Array of inline nodes representing the heading content. See Inline Nodes for details. Example
const nodes = parser.parse('## Hello *World*');
// [
// {
// type: 'heading',
// level: 2,
// children: [
// { type: 'text', text: 'Hello ' },
// { type: 'emphasis', children: [{ type: 'text', text: 'World' }] }
// ]
// }
// ]
ParagraphNode
Represents a paragraph of text.
interface ParagraphNode {
type: "paragraph";
children: Array<InlineNode>;
}
Array of inline nodes representing the paragraph content
Example
const nodes = parser.parse('This is a paragraph with [a link](https://example.com).');
// [
// {
// type: 'paragraph',
// children: [
// { type: 'text', text: 'This is a paragraph with ' },
// { type: 'link', href: 'https://example.com', children: [...] },
// { type: 'text', text: '.' }
// ]
// }
// ]
CodeBlockNode
Represents both fenced code blocks (```) and indented code blocks.
interface CodeBlockNode {
type: "code-block";
info?: string;
content: string;
}
Info string from fenced code blocks, typically the language identifier (e.g., "typescript", "python"). Undefined for indented code blocks.
The raw code content as a string, including trailing newline
Example
const markdown = `
\`\`\`typescript
const hello = "world";
\`\`\`
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'code-block',
// info: 'typescript',
// content: 'const hello = "world";\n'
// }
// ]
const markdown = `
const hello = "world";
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'code-block',
// content: 'const hello = "world";\n'
// }
// ]
BlockquoteNode
Represents a blockquote, which can contain nested block nodes.
interface BlockquoteNode {
type: "blockquote";
children: Array<BlockNode>;
}
Array of block nodes contained within the blockquote. Can include nested blockquotes, paragraphs, lists, etc.
Example
const markdown = `
> This is a blockquote
>
> > Nested blockquote
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'blockquote',
// children: [
// { type: 'paragraph', children: [...] },
// {
// type: 'blockquote',
// children: [{ type: 'paragraph', children: [...] }]
// }
// ]
// }
// ]
ListNode
Represents ordered or unordered lists.
type ListNode = {
type: "list";
tight: boolean;
items: Array<{ children: Array<BlockNode> }>;
} & (
| { kind: "ordered"; start: number }
| { kind: "unordered"; marker: string }
);
Whether the list is tight (no blank lines between items) or loose (blank lines present). Affects rendering.
Array of list items, where each item contains an array of block nodes
Block nodes contained within this list item (paragraphs, nested lists, code blocks, etc.)
Either "ordered" or "unordered"
Starting number for ordered lists (e.g., 1, 5, 10). Only present when kind is "ordered".
List marker character (-, *, or +) for unordered lists. Only present when kind is "unordered".
Example
const markdown = `
- Item 1
- Item 2
- Nested item
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'list',
// kind: 'unordered',
// marker: '-',
// tight: true,
// items: [
// { children: [{ type: 'paragraph', children: [...] }] },
// {
// children: [
// { type: 'paragraph', children: [...] },
// { type: 'list', kind: 'unordered', ... }
// ]
// }
// ]
// }
// ]
const markdown = `
1. First item
2. Second item
5. Starting at 5
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'list',
// kind: 'ordered',
// start: 1,
// tight: true,
// items: [...]
// }
// ]
TableNode
Represents GitHub-Flavored Markdown (GFM) tables.
interface TableNode {
type: "table";
head: {
cells: Array<{
align: "left" | "right" | "center" | undefined;
children: Array<InlineNode>;
}>;
};
body: {
rows: Array<{
cells: Array<{
align: "left" | "right" | "center" | undefined;
children: Array<InlineNode>;
}>;
}>;
};
}
Table header row
Array of header cells
Column alignment: "left", "right", "center", or undefined for default alignment
Inline content of the header cell
Table body containing data rows
Array of body rows
Array of cells in this row, with same structure as header cells
Example
const markdown = `
| Name | Age | City |
| :--- | :-: | ---: |
| Alice | 30 | NYC |
| Bob | 25 | SF |
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'table',
// head: {
// cells: [
// { align: 'left', children: [{ type: 'text', text: 'Name' }] },
// { align: 'center', children: [{ type: 'text', text: 'Age' }] },
// { align: 'right', children: [{ type: 'text', text: 'City' }] }
// ]
// },
// body: {
// rows: [
// {
// cells: [
// { align: 'left', children: [{ type: 'text', text: 'Alice' }] },
// { align: 'center', children: [{ type: 'text', text: '30' }] },
// { align: 'right', children: [{ type: 'text', text: 'NYC' }] }
// ]
// },
// // ... second row
// ]
// }
// }
// ]
ThematicBreakNode
Represents a horizontal rule / thematic break (---, ***, ___).
interface ThematicBreakNode {
type: "thematic-break";
}
Example
const nodes = parser.parse('---');
// [{ type: 'thematic-break' }]
HtmlBlockNode
Represents raw HTML block content.
interface HtmlBlockNode {
type: "html-block";
content: string;
}
Raw HTML content as a string, exactly as it appears in the source
Example
const markdown = `
<div class="custom">
<p>HTML content</p>
</div>
`;
const nodes = parser.parse(markdown);
// [
// {
// type: 'html-block',
// content: '<div class="custom">\n <p>HTML content</p>\n</div>'
// }
// ]