Components

Coderoo provides 25+ markdown components for creating rich, interactive educational content. All components use clean directive syntax that's easy to read and write.

Categories

Content --- Asides, Steps, Details, Spoilers, Highlight

Code --- Code Blocks, Code Groups, Terminal Output

Layout --- Tabs, Cards, Card Grids, Link Cards, Link Buttons, Timeline

Media --- Figures, Image Comparison, Gallery, Videos

Inline --- Badges, Keyboard Keys, Annotations

Diagrams --- Math (KaTeX), Mermaid, File Tree

Tables --- Standard and enhanced markdown tables

Syntax Conventions

Block components use the triple-colon directive syntax:

:::component-name
Content goes here
:::

Inline components use the double-colon syntax:

::component[visible text]{attribute="value"}

All components support full markdown nesting --- bold, lists, code blocks, and even other components.