8 dépôts
Visual enhancements for code blocks including line numbers, filename titles, and copy buttons.
Distinct from Code Line Highlighting: Covers multifaceted annotations like filenames and copy buttons, not just line highlighting.
Explore 8 awesome GitHub repositories matching user interface & experience · Code Block Annotations. Refine with filters or upvote what's useful.
Nextra is a documentation framework for Next.js that functions as an MDX static site generator. It enables the creation of structured technical documentation sites by transforming MDX files into themed static pages with built-in layout and navigation. It serves as a React-based documentation tool that allows the integration of custom React components directly into markdown content. The framework distinguishes itself through integrated full-text search and a localization system that manages multilingual content via language routing and translation selectors. It also includes an AI-powered chat
Enhances code blocks with line numbering, filename titles, and one-click copy functionality.
Vditor is a browser-based Markdown editor and rendering engine that supports multiple editing interfaces, including a visual rich-text experience, instant rendering, and a traditional side-by-side split-view preview. It serves as an authoring tool for technical documentation and a component for web-based editor integration. The project is distinguished by its support for complex technical content, utilizing specialized rendering for mathematical formulas, flowcharts, sequence diagrams, and mind maps. It also functions as a collaborative document review tool, enabling users to attach anchored
Enhances code blocks with visual annotations, including syntax highlighting and dedicated copy buttons.
go-swagger is a toolkit for working with Swagger/OpenAPI 2.0 specifications in Go. It generates server, client, and CLI code from a specification document, and can also produce a specification by scanning annotated Go source code. The project includes a static validation engine that checks documents against the schema and project-specific rules, and a specification transformation pipeline that resolves, flattens, and merges documents. The toolkit generates both client and server code from the same specification, ensuring consistency in request and response handling. It also produces a command
Produces Swagger/OpenAPI 2.0 specifications by scanning annotated Go source code.
Hexo Theme Butterfly is a visual template for Hexo that transforms Markdown content into a responsive website featuring card-based layouts. It functions as a technical content renderer capable of displaying complex data such as mathematical formulas, Mermaid diagrams, and interactive charts within blog posts. The interface is PWA enabled, utilizing service workers and manifest files to provide offline access and installation on mobile devices. The theme distinguishes itself through a wide array of specialized content rendering tools, including musical score rendering, chronological timelines,
Enhances code snippet readability with full-screen viewing and diagram integration.
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.
Highlights specific lines or tokens within code blocks using language-specific comments to apply custom styles.
Un thème Material Design responsive pour les blogs statiques construits avec le framework Hexo. Il fonctionne comme un système de mise en page complet qui transforme les fichiers markdown en pages HTML stylisées, offrant un environnement spécialisé pour la documentation technique et le blogging personnel. Le thème se caractérise par une approche axée sur les données pour la visualisation du contenu, utilisant des graphiques radar pour les catégories et des nuages de mots pour les tags afin de représenter les métadonnées des articles. Il se distingue par une architecture chronologique pour les archives du blog. Le projet couvre un large éventail de capacités de publication technique, incluant le rendu de formules mathématiques, la coloration syntaxique pour les blocs de code et la génération de tables des matières adaptatives. Il inclut des outils de personnalisation via des pages d'accueil dynamiques, des menus de navigation multi-niveaux et des pages de profil détaillées. L'engagement des lecteurs est soutenu par une recherche intégrée, des articles protégés par mot de passe et l'intégration de systèmes de commentaires et de chat tiers. La performance est gérée via le routage des ressources CDN et le préchargement des assets, tandis que la visibilité SEO est gérée via des métadonnées configurables.
Enhances code blocks with line numbering, filename titles, and one-click copy buttons.
Cherry Markdown est un éditeur Markdown basé sur le web et un moteur d'analyse qui convertit le texte balisé en HTML assaini avec un volet de prévisualisation synchronisé en temps réel. Il fonctionne comme une interface de texte riche et un outil WYSIWYG, fournissant un système pour transformer des chaînes de balisage en documents HTML ou formats portables. Le projet se distingue par un rendu haute performance et un modèle d'extensibilité flexible. Il utilise le diffing de DOM virtuel et le rendu partiel pour maintenir la réactivité dans les documents volumineux, et il permet la création de règles d'analyse personnalisées et de composants HTML spécialisés via un système de plugins. La surface de capacités de l'éditeur inclut une gestion de contenu complète pour les formules mathématiques, les diagrammes et les médias riches, ainsi que des contrôles de saisie avancés tels que l'édition multi-curseurs et la navigation modale de style Vim. Il dispose également d'un flux de travail robuste d'exportation de documents et d'un système de jetons de design pour une personnalisation visuelle approfondie de l'éditeur et des zones de prévisualisation. Le système inclut une couche de sécurité qui utilise une assainissement HTML basée sur liste blanche pour prévenir les attaques par injection.
Enhances code blocks with interactive visual elements like line numbers and copy buttons.
Jupyter Book est un éditeur de livres computationnels et un générateur de sites statiques qui convertit les notebooks Jupyter et les fichiers markdown en livres web interactifs et en documents PDF de qualité publication. Il sert d'outil de documentation basé sur markdown qui exécute le code intégré au moment de la compilation et met en cache les sorties résultantes pour un affichage statique. Le système se distingue par sa prise en charge des publications de données interactives, permettant aux lecteurs d'interagir avec des widgets computationnels en direct et de lancer des notebooks dans des environnements d'exécution distants. Il étend le markdown standard avec un système de rôles et de directives pour soutenir la rédaction scientifique, incluant les mathématiques LaTeX, la gestion des citations bibliographiques et les références croisées numérotées. La plateforme couvre un large éventail de capacités, incluant le formatage académique pour les preuves et théorèmes, la gestion de mise en page interactive via des panneaux repliables et des références complexes entre sections internes et projets externes. Elle fournit également des outils pour l'organisation du contenu via des structures de livres hiérarchiques et une table des matières découplée. Le projet inclut des utilitaires pour l'intégration à l'hébergement web et la validation de l'intégrité du contenu pour détecter les liens brisés pendant le processus de build.
Displays syntax-highlighted code blocks including line numbers, emphasized lines, and filenames.