Search

PythonReactSEOPDF
GitHub Skill

docs-renderer

Visual Artist. Converts Markdown to beautiful HTML and PDF with Themes, LaTeX, and Mermaid support. Triggers: "render pdf", "export html", "generate docs output", "usar tema oscuro".

crucenojmc☆ 2 Repository stars0 Repository forks

Installation

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.

View source ↗Guides

Skill instructions

Docs Renderer (The Artist)

"Separation of Content and Presentation."

Este skill se encarga de que tu documentación se vea increíble. Toma Markdown crudo (con matemáticas, diagramas y links) y lo convierte en documentos profesionales.

🎨 Características Clave

1. Sistema de Temas (Themes)

Separa el contenido del estilo.

  • Modern: Tipografía sans-serif limpia (Inter/Roboto), espaciado generoso.
  • Classic: Serif (Merriweather), estilo académico/libro.
  • Dark: Tema de alto contraste para lectura en pantalla.
  • Technical: Estilo denso, mono-spaced para documentación de API.
2. Soporte Rico (Rich Media)
  • Math: Renderizado LaTeX via KaTeX ($E=mc^2$).
  • Diagrams: Renderizado Mermaid.js nativo con soporte de temas variables (colores, curvas).
  • WikiLinks: Resolución de enlaces [[WikiLink]] a anclas HTML.
3. Formatos de Salida
  • HTML: Un solo archivo (o sitio estático) autocontenido.
  • PDF: Impresión de alta fidelidad via Puppeteer.
4. Theme Gallery

View visual examples of all themes


Uso

Comando Principal
# Ejecutar via Docker wrapper
./skills/docs-renderer/bin/render.sh <input> <output> [options]
Opciones
  • --theme <name>: modern, classic, dark, technical.
  • --format <fmt>: pdf, html (default: pdf).
  • --title <text>: Título del documento.

Patrones de Implementación

Markdown-it Stack

El corazón del renderizado usa markdown-it con plugins:

  • markdown-it-texmath (LaTeX)
  • markdown-it-wikilinks (Obsidian links)
  • markdown-it-container (Callouts/Admonitions)
  • markdown-it-anchor (Permalinks)
Isolation

Todo corre dentro de un contenedor Docker para garantizar que las fuentes y herramientas de renderizado (Puppeteer/Chromium) sean idénticas en desarrollo y CI.


Configuración de Temas

Los temas viven en assets/themes/. Un tema se compone de:

  1. CSS: Estilos para el HTML.
  2. Mermaid Config: JSON con configuración de colores para diagramas.

Comportamiento del Agente

  1. Selección de Tema: Si el usuario no especifica, usa modern.
  2. Validación: Verifica que el input exista.
  3. Feedback: Reporta la ruta absoluta del archivo generado.

Examples

Read the usage examples in the source repository.

View source ↗

Source history

Indexed on
2026-03-11
Index updated
2026-03-11
Branch
main

Index and sync dates describe this directory. View the source repository for code history.

GitHub ↗

chat Comments (0)

chat_bubble_outline

No comments yet. Be the first to share your thoughts!