Awesome GitHub RepositoriesCode Presentation Themes

Carbon is a code visualization tool that transforms raw source code into stylized, high-quality images for use in technical documentation, social media, and educational content. It functions as a browser-based editor that utilizes a language-aware tokenization engine to apply syntax highlighting and visual themes to text. The platform distinguishes itself through its versatile delivery models, which include a standalone desktop application for offline use and programmatic interfaces for automated snippet generation via command-line tools or messaging bots. Users can customize the visual prese

Polacode is a VS Code extension that converts code snippets into styled, shareable images. It functions as a dedicated code screenshot generator and image exporter, allowing users to capture selected code and render it as a polished visual for documentation, social media, or presentations. The extension provides a dedicated editor pane where users can paste and preview code before generating a screenshot. It offers screenshot customization features including adjustable background color, shadow, transparency, and target image format, all managed through VS Code's settings system. The capture a

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

Codehike es un framework de documentación basado en React y una herramienta interactiva para recorridos de código. Funciona como un orquestador de contenido markdown que transforma markdown decorado en datos estructurados y componentes de React, sirviendo como capa de visualización para resaltar rangos de código, diffs y errores de compilación. El proyecto destaca por su capacidad para crear experiencias de "scrollycoding" y tutoriales técnicos paso a paso. Cuenta con animaciones a nivel de token que demuestran visualmente cómo evoluciona la lógica entre versiones de código y proporciona un sistema para sincronizar el estado de la UI con la posición del scroll del navegador. El framework cubre una amplia gama de capacidades de visualización, incluyendo la creación de presentaciones de código, diseños de spotlight y bloques de código con pestañas. Admite anotaciones detalladas mediante tooltips, callouts y notas al pie, así como utilidades funcionales como selectores de lenguaje, transpilación de código e integración de datos de compiladores en tiempo real. El sistema utiliza validación basada en esquemas para garantizar la seguridad de tipos y la consistencia de los datos estructurados extraídos de archivos markdown.

Chroma es un resaltador de sintaxis escrito en Go que convierte código fuente crudo en texto coloreado o HTML. Identifica lenguajes de programación y tokens utilizando lexers específicos del lenguaje para producir una salida resaltada para varios entornos. El proyecto utiliza un sistema de coloración basado en temas que desacopla los tipos de token de los colores finales a través de una capa intermedia de mapeo de estilos. Esto permite temas de código personalizados mapeando categorías de tokens específicas a colores de primer plano y fondo. El sistema cubre la identificación de lenguaje, el formato de texto de terminal para visores compatibles con ANSI y la presentación de código web mediante la generación de HTML con numeración de líneas y clases CSS. También incluye una interfaz de línea de comandos para colorear archivos directamente en la terminal.

react-syntax-highlighter es un componente para renderizar código fuente con resaltado de sintaxis en aplicaciones React. Actúa como un envoltorio para los motores PrismJS y Highlight.js para proporcionar visualización de código formateado y colores específicos del lenguaje. El proyecto proporciona un renderizador de bloques de código personalizable que admite inyección DOM personalizada, numeración de líneas y estilos en línea. Permite a los usuarios reemplazar etiquetas HTML predeterminadas con componentes React personalizados para controlar cómo se inyecta el código en el modelo de objetos del documento (DOM). La biblioteca cubre la gestión de presentación de código mediante temas visuales y numeración de líneas. Incluye mecanismos para la optimización de paquetes, como la carga asíncrona de motores de resaltado y definiciones de lenguaje específicas para reducir los tiempos de carga inicial de la página.

react-syntax-highlighter is a React component that renders source code with language-specific syntax coloring. It wraps the Prism and Highlight.js syntax highlighting libraries, tokenizing source code using their language grammars and mapping each token to a styled React element. The component operates in two styling modes: inline style objects applied directly to each token, or CSS class names that can be themed via external stylesheets. This dual-mode approach makes the highlighter portable across environments where CSS class injection may or may not be available. The component is built aro