7 مستودعات
Styling configurations for code blocks including syntax highlighting themes, typography, and container aesthetics.
Distinguishing note: Specifically targets the visual styling of code snippets for presentation rather than general UI component styling.
Explore 7 awesome GitHub repositories matching user interface & experience · Code Presentation Themes. Refine with filters or upvote what's useful.
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
Customizing the visual appearance of code blocks with specific themes, fonts, and window styles to maintain consistent branding across platforms.
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
Customizes the visual appearance of code screenshots with background colors, shadows, and transparency settings.
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
Styles code, backgrounds, and typography using predefined themes or custom configuration objects.
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 project is distinguished by its ability to create scrollycoding experiences and step-by-step technical tutorials. It features token-level animations that visually demonstrate how logic evolves between code versions and provides a system for syncing UI state to the browser scroll position.
Overrides the default display of the code container and tokens to implement custom themes and layouts.
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
Creates highlighted HTML snippets with custom styles and line numbers for web display.
react-syntax-highlighter هو مكون لعرض الكود المصدري مع تمييز بناء الجملة في تطبيقات React. يعمل كمغلف لمحركات PrismJS و Highlight.js لتوفير عرض كود منسق وألوان خاصة باللغة. يوفر المشروع عارض كتل كود قابل للتخصيص يدعم حقن DOM المخصص، وترقيم الأسطر، والتنسيق المضمن. يسمح للمستخدمين باستبدال علامات HTML الافتراضية بمكونات React مخصصة للتحكم في كيفية حقن الكود في نموذج كائن المستند. تغطي المكتبة إدارة عرض الكود من خلال السمات المرئية وترقيم الأسطر. تتضمن آليات لتحسين الحزمة، مثل تحميل محركات التمييز وتعريفات اللغة المحددة بشكل غير متزامن لتقليل أوقات تحميل الصفحة الأولية.
Manages visual styling for code blocks, including syntax highlighting themes, typography, and line wrapping.
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
Applies custom color themes and language grammars to code blocks for consistent branding.