Explain code visually
Highlight source code and create annotated or animated walkthroughs.
Options for this task
Code Hike
Library / toolTools for combining code and explanatory content.
- Good for
- Building interactive code walkthroughs and technical storytelling pages.
Expressive Code
Library / toolA framework for richly rendered code blocks.
- Good for
- Publishing code examples with highlighting, annotations, and presentation features.
Lowlight
Library / toolSyntax highlighting that produces a virtual syntax tree.
- Good for
- Rendering highlighted code through a custom virtual-DOM integration.
Shiki
Library / toolA syntax highlighter using TextMate grammars and editor-style themes.
- Good for
- Rendering code samples with coloring similar to a code editor.
Shiki Magic Move
Library / toolTools for animating changes between highlighted code blocks.
- Good for
- Showing how code evolves during a tutorial or presentation.
Speed Highlight
Library / toolA syntax-highlighting library for code snippets.
- Good for
- Adding highlighted code samples to webpages and documentation.
Before you decide
Try a small, realistic example. Check the runtime, accessibility, maintenance, and license requirements for the features you need.