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 este un framework de documentație bazat pe React și un instrument interactiv pentru walkthrough-uri de cod. Acesta funcționează ca un orchestrator de conținut markdown care transformă markdown-ul decorat în date structurate și componente React, servind drept strat de vizualizare pentru evidențierea secțiunilor de cod, a diferențelor (diffs) și a erorilor de compilare. Proiectul se distinge prin capacitatea de a crea experiențe de tip "scrollycoding" și tutoriale tehnice pas cu pas. Dispune de animații la nivel de token care demonstrează vizual modul în care logica evoluează între versiunile de cod și oferă un sistem pentru sincronizarea stării UI cu poziția de scroll a browserului. Framework-ul acoperă o gamă largă de capacități de vizualizare, inclusiv crearea de slideshow-uri de cod, layout-uri de tip spotlight și blocuri de cod cu tab-uri. Suportă adnotarea detaliată a codului prin tooltips, callout-uri și note de subsol, precum și utilitare funcționale precum switchere de limbaj, transpilarea codului și integrarea datelor de compilare în timp real. Sistemul utilizează validarea bazată pe schemă pentru a asigura siguranța tipurilor și consistența datelor structurate extrase din fișierele markdown.

Chroma este un highlighter de sintaxă scris în Go care convertește codul sursă brut în text colorat sau HTML. Identifică limbajele de programare și token-urile folosind lexere specifice limbajului pentru a produce o ieșire evidențiată pentru diverse medii. Proiectul utilizează un sistem de colorizare bazat pe teme care decuplează tipurile de token-uri de culorile finale printr-un strat intermediar de mapare a stilurilor. Acest lucru permite teme de cod personalizate prin maparea categoriilor specifice de token-uri la culori de prim-plan și fundal. Sistemul acoperă identificarea limbajului, formatarea textului în terminal pentru vizualizatoare compatibile ANSI și prezentarea codului web prin generarea HTML cu numerotarea liniilor și clase CSS. Include, de asemenea, o interfață de linie de comandă pentru colorizarea fișierelor direct în terminal.

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

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