Skip to main content

Markdown Rendering Support

The MarkdownNode renders GFM (GitHub Flavored Markdown) directly to a Skia Picture using pulldown-cmark's event stream and Skia's textlayout::Paragraph API. No HTML/CSS pipeline is involved — the markdown source is walked and drawn in a single pass.

  • Parser: pulldown-cmark 0.13 with ENABLE_STRIKETHROUGH | ENABLE_TABLES | ENABLE_TASKLISTS | ENABLE_MATH
  • Renderer: crates/grida-canvas/src/painter/markdown.rs
  • Node schema: MarkdownNodeRec in crates/grida-canvas/src/node/schema.rs
  • Theme: GitHub markdown light (hardcoded colors from fixtures/css/github-markdown-light.css)

Block Elements

ElementStatusNotes
Heading h132px semi-bold, bottom border
Heading h224px semi-bold, bottom border
Heading h320px semi-bold
Heading h416px semi-bold
Heading h514px semi-bold
Heading h613.5px semi-bold
ParagraphWord-wrapped to content width
Code blockMonospace, rounded background rect + border
Code block (lang)⚠️Language tag parsed but no syntax highlighting
BlockquoteLeft border + indented text
Horizontal rule2px stroke line
Unordered listBullet prefix, nested depth tracked
Ordered listNumbered prefix, auto-incrementing
Task listCheckbox character prefix (☐/☑)
Display math $$⚠️Rendered as centered monospace italic text (raw LaTeX source)

Inline Elements

ElementStatusNotes
BoldFont weight BOLD
ItalicFont slant Italic
StrikethroughLINE_THROUGH decoration
Inline codeMonospace font, 0.85x font size
LinkBlue color + underline decoration
Inline math $⚠️Rendered as monospace italic text (raw LaTeX)
Soft breakCollapsed to space
Hard breakNewline character

Tables

FeatureStatusNotes
Basic tableEqual-width columns, cell padding
Header rowSemi-bold text, light background
Column alignmentLeft / Center / Right from :--- syntax
Grid bordersFull horizontal + vertical border grid
Multi-line cellsRow height adapts to tallest cell

Images

FeatureStatusNotes
Image placeholderRounded rect with alt text label (🖼 prefix)
Image loadingNo actual image fetch/display; placeholder only

Known Limitations

FeatureStatusEffortNotes
LaTeX math renderingHighRequires TeX math layout engine (e.g. KaTeX/MathJax binding or OpenType MATH table consumer). Current fallback shows raw LaTeX source in monospace italic.
Syntax highlightingMediumCode block language tag is parsed but ignored. Would need a tokenizer (e.g. syntect or tree-sitter) to map tokens to colored text styles.
Inline HTML (<sup>, etc)Mediumpulldown-cmark emits Event::Html for inline HTML. Would need mini HTML parser for supported tags.
<details><summary>HighRequires interactive expand/collapse state.
Dark themeLowTheme colors are hardcoded light. fixtures/css/github-markdown-dark.css exists for reference.
FootnotesMediumParser flag exists (ENABLE_FOOTNOTES) but events not handled.
Nested blockquotesLowOnly one level of blockquote indentation rendered.
Image loadingMediumRequires async fetch + resource registration into the renderer.
Picture cachingLowCurrently re-renders every frame. Should cache keyed on (markdown hash, width).