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 est un framework de documentation basé sur React et un outil de walkthrough de code interactif. Il fonctionne comme un orchestrateur de contenu markdown qui transforme le markdown décoré en données structurées et en composants React, servant de couche de visualisation pour mettre en évidence des plages de code, des diffs et des erreurs de compilation. Le projet se distingue par sa capacité à créer des expériences de "scrollycoding" et des tutoriels techniques étape par étape. Il propose des animations au niveau des tokens qui démontrent visuellement l'évolution de la logique entre les versions de code et fournit un système pour synchroniser l'état de l'UI avec la position de défilement du navigateur. Le framework couvre un large éventail de capacités de visualisation, incluant la création de diaporamas de code, des mises en page en surbrillance et des blocs de code à onglets. Il supporte l'annotation détaillée via des tooltips, des callouts et des notes de bas de page, ainsi que des utilitaires fonctionnels comme des sélecteurs de langage, la transpilation de code et l'intégration de données de compilation en temps réel. Le système utilise une validation basée sur des schémas pour garantir la sécurité des types et la cohérence des données extraites des fichiers markdown.

Chroma est un colorateur de syntaxe écrit en Go qui convertit le code source brut en texte colorisé ou en HTML. Il identifie les langages de programmation et les tokens en utilisant des lexers spécifiques au langage pour produire une sortie mise en évidence pour divers environnements. Le projet utilise un système de colorisation piloté par thème qui découple les types de tokens des couleurs finales via une couche de mappage de style intermédiaire. Cela permet un thématage de code personnalisé en mappant des catégories de tokens spécifiques vers des couleurs de premier plan et d'arrière-plan. Le système couvre l'identification du langage, le formatage de texte de terminal pour les visionneuses compatibles ANSI et la présentation de code web via la génération HTML avec numérotation de ligne et classes CSS. Il inclut également une interface en ligne de commande pour coloriser les fichiers directement dans le terminal.

react-syntax-highlighter est un composant pour le rendu de code source avec coloration syntaxique dans les applications React. Il agit comme un wrapper pour les moteurs PrismJS et Highlight.js afin de fournir un affichage de code formaté et des couleurs spécifiques au langage. Le projet fournit un moteur de rendu de bloc de code personnalisable qui prend en charge l'injection DOM personnalisée, la numérotation des lignes et le style inline. Il permet aux utilisateurs de remplacer les balises HTML par défaut par des composants React personnalisés pour contrôler la manière dont le code est injecté dans le document object model. La bibliothèque couvre la gestion de la présentation du code via des thèmes visuels et la numérotation des lignes. Elle inclut des mécanismes pour l'optimisation du bundle, tels que le chargement asynchrone des moteurs de coloration et des définitions de langage spécifiques pour réduire les temps de chargement initiaux.

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