Code Surfer is a web-based code slide framework and presentation tool designed for creating technical slides. It functions as a code animation library and diff visualizer that enables the rendering of source code with animated transitions, zooming, and highlighting. The project focuses on visualizing code evolution through state morphing and diff animations. It uses coordinate-based view transitions and smooth scrolls to guide viewers through changes between different code versions across a slide deck. The framework provides capabilities for attention management via line-level focus, section
react-syntax-highlighter is a component for rendering source code with syntax highlighting in React applications. It acts as a wrapper for the PrismJS and Highlight.js engines to provide formatted code display and language-specific colors. The project provides a customizable code block renderer that supports custom DOM injection, line numbering, and inline styling. It allows users to replace default HTML tags with custom React components to control how code is injected into the document object model. The library covers code presentation management through visual themes and line numbering. It
Markdoc is a documentation content framework that extends standard Markdown with custom tags, typed schemas, and reusable components, parsing content into an abstract syntax tree and rendering it as React elements or HTML. It provides a structured authoring system where documents are processed through an AST-based pipeline, enabling validation, transformation, and flexible output generation. The framework distinguishes itself through a schema-driven validation pipeline that checks document structure and attribute values against defined rules, and a pluggable renderer architecture that accepts
Codehike is a React-based documentation framework and interactive code walkthrough tool. It functions as a markdown content orchestrator that transforms decorated markdown into structured data and React components, serving as a visualization layer for highlighting code ranges, diffs, and compiler errors.
The main features of code-hike/codehike are: Code Walkthroughs, Scrollycoding Walkthroughs, Interactive Annotations, Content Schema Definitions, Content Orchestrators, Markdown-to-Component Mappings, Prose-to-Code Linking, Token Positional Mapping.
Open-source alternatives to code-hike/codehike include: pomber/code-surfer — Code Surfer is a web-based code slide framework and presentation tool designed for creating technical slides. It… conorhastings/react-syntax-highlighter — react-syntax-highlighter is a component for rendering source code with syntax highlighting in React applications. It… markdoc/markdoc — Markdoc is a documentation content framework that extends standard Markdown with custom tags, typed schemas, and… alecthomas/chroma — Chroma is a syntax highlighter written in Go that converts raw source code into colorized text or HTML. It identifies… shuding/nextra — Nextra is a documentation framework for Next.js that functions as an MDX static site generator. It enables the… blinkfox/hexo-theme-matery — A responsive Material Design theme for static blogs built with the Hexo framework. It functions as a comprehensive…
Chroma is a syntax highlighter written in Go that converts raw source code into colorized text or HTML. It identifies programming languages and tokens using language-specific lexers to produce highlighted output for various environments. The project utilizes a theme-driven colorization system that decouples token types from final colors through an intermediate style mapping layer. This allows for custom code theming by mapping specific token categories to foreground and background colors. The system covers language identification, terminal text formatting for ANSI-compatible viewers, and web
