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".
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求,再添加到工作流。
查看来源 ↗使用指南技能说明
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:
- CSS: Estilos para el HTML.
- Mermaid Config: JSON con configuración de colores para diagramas.
Comportamiento del Agente
-
Selección de Tema: Si el usuario no especifica, usa
modern. - Validación: Verifica que el input exista.
- Feedback: Reporta la ruta absoluta del archivo generado.
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-03-11
- 索引更新时间
- 2026-03-11
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!