13 repositorios
Transforming raw code strings into styled HTML structures for browser display.
Distinct from HTML Content Processing: Specifically addresses the transformation of code into styled HTML, not general HTML parsing.
Explore 13 awesome GitHub repositories matching user interface & experience · Code-to-HTML Rendering. Refine with filters or upvote what's useful.
Prism is a JavaScript syntax highlighter and web-based code formatter. It functions as an extensible syntax engine designed to colorize and format code blocks on web pages, making various programming languages easier to read. The project processes raw code strings into styled HTML elements for use in frontend content rendering, technical documentation, and static site generation. It provides a modular system for adding custom language definitions and highlighting rules to a web-based code viewer.
Processes raw code strings into styled HTML elements for browser-based display.
BlocksKit es un framework de UI basado en bloques y una biblioteca de extensión de bloques de código diseñada para construir interfaces interactivas y diseños de componentes dentro de entornos de aplicaciones nativas. Proporciona un sistema estructurado para definir bloques de contenido complejos y elementos interactivos que exceden las restricciones de formato estándar. El framework incluye una capa de comunicación de puente nativo que funciona como un bus de mensajes para el intercambio de datos asíncrono entre bloques invitados en sandbox y un host nativo privilegiado. Para gestionar estas interacciones, un gestor de permisos en tiempo de ejecución asigna las funciones de bloque solicitadas a las capacidades nativas, permitiendo el acceso al sistema mientras se mantienen los límites de seguridad. La biblioteca admite el diseño avanzado de bloques, la mejora de bloques de código personalizados y el desarrollo de documentación técnica interactiva. Facilita la extensión de runtimes en sandbox inyectando capacidades del sistema nativo en entornos de ejecución restringidos.
Enhances code blocks by removing restrictions and enabling specialized rendering and functional capabilities.
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.
Prevents specific code blocks from being processed based on custom conditional functions.
Markdig es un procesador de Markdown de alto rendimiento para aplicaciones .NET que convierte texto Markdown a HTML u otros formatos de destino. Es un parser compatible con CommonMark y un motor extensible que puede transformar Markdown en un árbol de sintaxis abstracta (AST) manipulable y consultable. La librería proporciona un framework para añadir sintaxis personalizada y lógica de renderizado a través de un pipeline modular de parsers y renderizadores. Soporta compilación nativa ahead-of-time y trimming para minimizar el tamaño del binario. Las capacidades incluyen la generación de HTML estructurado con atributos y estilos personalizados, la extracción de YAML front matter para el procesamiento de sitios estáticos y la conversión de contenido a texto plano. El motor también cubre mejoras tipográficas, preparación de fórmulas matemáticas y formateo automatizado de enlaces. El procesador incluye un mapeo de fuente preciso para rastrear rangos de caracteres y emplea streaming de salida y límites de profundidad de anidamiento para gestionar el rendimiento y la estabilidad.
Transforms fenced code blocks into HTML containers for client-side diagram rendering.
Brick Design es un framework de constructor de páginas low-code utilizado para crear editores visuales de arrastrar y soltar que generan código de diseño y estilo listo para producción para interfaces de usuario. Funciona como un motor de diseño visual y orquestador de componentes de UI, proporcionando las herramientas necesarias para gestionar restricciones de componentes, reglas de anidamiento y configuraciones de propiedades visuales. El framework incluye un generador de plantillas dinámicas que utiliza renderizado de lógica y variables de expresión para crear plantillas de página reutilizables y basadas en datos. También opera como una herramienta de diseño multidispositivo, ofreciendo cambio de viewport y estilos adaptativos para asegurar pantallas consistentes en escritorios y pantallas móviles. El sistema cubre una amplia gama de capacidades, incluyendo flujos de trabajo de diseño a código, diseño de maquetación responsiva y renderizado visual en tiempo real. Gestiona jerarquías de UI complejas mediante alineación de ajuste basada en coordenadas, mapeo de propiedades basado en estado y la integración de librerías de componentes externas.
Simulates content rendering across different device dimensions to verify and validate responsive layouts.
Cherry Markdown es un editor de Markdown basado en web y motor de análisis que convierte texto de marcado en HTML saneado con un panel de vista previa sincronizado en tiempo real. Funciona como una interfaz de texto enriquecido y herramienta WYSIWYG, proporcionando un sistema para transformar cadenas de marcado en documentos HTML o formatos portátiles. El proyecto se distingue por un renderizado de alto rendimiento y un modelo de extensibilidad flexible. Utiliza diffing de DOM virtual y renderizado parcial para mantener la capacidad de respuesta en documentos grandes, y permite la creación de reglas de análisis personalizadas y componentes HTML especializados mediante un sistema de plugins. La superficie de capacidades del editor incluye gestión integral de contenido para fórmulas matemáticas, diagramas y medios enriquecidos, así como controles de entrada avanzados como edición con múltiples cursores y navegación modal estilo Vim. También cuenta con un flujo de trabajo robusto de exportación de documentos y un sistema de tokens de diseño para una personalización visual profunda del editor y las áreas de vista previa. El sistema incluye una capa de seguridad que utiliza saneamiento de HTML basado en listas blancas para prevenir ataques de inyección.
Allows defining custom rendering rules to transform code blocks into specialized components or styled output.
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.
Implements a customizable renderer that allows replacing default HTML tags with user-defined React components for granular DOM control.
Braft Editor es un editor de texto enriquecido basado en React construido sobre Draft.js que proporciona un framework para la creación y el formato de contenido. Funciona como un componente de interfaz de usuario reutilizable que permite a los usuarios redactar documentos formateados en una interfaz WYSIWYG y exportar el contenido resultante como cadenas HTML. El proyecto cuenta con soporte de localización integrado para múltiples idiomas, incluyendo chino, japonés y coreano. Proporciona un sistema modular para extender la funcionalidad del editor a través de plugins, mapeos de barra de herramientas personalizados y entidades multimedia especializadas. El editor cubre una amplia gama de capacidades de contenido, incluyendo formato de texto enriquecido, estilo de párrafos y bloques, y la organización de listas anidadas. Admite la incrustación de contenido multimedia como imágenes, audio, video y bloques de código formateados. El estado del documento se gestiona a través de un patrón de componente controlado, permitiendo la sincronización entre el editor y el estado de la aplicación.
Includes formatted code blocks that support tab-based indentation and custom visual rendering.
smtp4dev is a suite of tools featuring a mock SMTP server that intercepts outgoing email traffic and stores messages for inspection instead of delivering them to recipients. It includes a web-based viewer for inspecting email metadata, raw source code, and MIME structures, alongside a responsive email previewer that simulates how HTML emails appear across different viewport sizes and device layouts. The project provides a traffic analyzer to log protocol interactions and session data for debugging delivery failures. It also operates as a TLS SMTP server, supporting encrypted connections via T
Simulates email layouts by wrapping HTML content in adjustable containers to test responsive design.
diff2html is a Git diff visualization library that transforms unified diff text into structured HTML. It serves as a renderer for visualizing code changes in web browsers, providing components to inject stylized diff visualizations and collapsible file lists directly into web page elements. The library enables both side-by-side and line-by-line code comparisons. It includes a syntax highlighting diff viewer that applies language-specific color coding to source code based on file extensions or manual mappings. To maintain alignment during reviews, the project implements synchronized scrolling
Transforms unified diff text into styled HTML structures for visual representation in web browsers.
Yoopta-Editor is a headless framework for building customizable block-based rich text editors. It utilizes a JSON-based document engine to manage editor state and provides a WYSIWYG interface for creating structured documents. The system separates core document logic from the visual layer, allowing for complete customization of the user interface. The framework is designed for real-time collaborative editing, featuring a synchronization engine with conflict resolution and remote cursor presence tracking. It offers a highly extensible plugin system that allows developers to define new content
Overrides default code element representations to implement custom layouts or metadata displays.
Phoenix is a comprehensive web development suite that provides a browser-based code editor, an AI-powered coding assistant, and a live web previewer. It integrates a visual Markdown document editor and a web-based Git client, allowing users to write and manage HTML, CSS, and JavaScript across different devices and platforms. The environment features a visual UI design system that maps canvas manipulations directly to code and enables in-place CSS editing. It supports real-time change previews and responsive layout testing across multiple device breakpoints to verify rendering on phones, table
Simulates content rendering across different screen dimensions to verify responsive layouts on phones, tablets, and desktops.
pulldown-cmark is a pull-parsing library that transforms Markdown text into a stream of events based on the CommonMark specification. It functions as an event-based processor that represents document structure as an iterator of events rather than a concrete syntax tree, serving as both a parser and a renderer to convert Markdown into HTML strings. The library is designed for memory efficiency by processing text as a stream to minimize resource usage. It supports programmatic document transformation, allowing users to map or filter the event stream before final rendering. The project includes
Implements an event-driven rendering process to convert structural Markdown events into HTML strings.