Sobre el proyecto
github-markdown-css es un paquete CSS pequeño cuyo propósito declarado es reproducir el estilo visual que GitHub aplica al Markdown renderizado, usando la cantidad mínima de CSS necesaria. La hoja de estilos se genera en lugar de editarse a mano; el README dirige las contribuciones al repositorio separado generate-github-markdown-css.
El uso es sencillo: importa github-markdown.css, añade una clase markdown-body al contenedor que tenga tu Markdown renderizado y establece un ancho. El README señala que GitHub usa un ancho de 980px con un padding de 45px y 15px en móvil, y proporciona un ejemplo con box-sizing, min-width, max-width, margin auto y una media query para viewports estrechos. También se muestra un color de fondo para modo oscuro mediante prefers-color-scheme.
El paquete incluye siete temas: uno predeterminado que cambia entre claro y oscuro automáticamente mediante prefers-color-scheme, solo claro, solo oscuro, oscuro atenuado, oscuro de alto contraste, oscuro para daltónicos (protanopia y deuteranopia) y variantes claras para daltónicos.
Para HTML que coincida con estos estilos, el README sugiere la API /markdown de GitHub, que produce el HTML que el propio GitHub genera. Señala que otros parsers de Markdown funcionarán en su mayoría con los estilos, y recomienda starry-night para el resaltado de código que imita a GitHub.
Las opciones de instalación incluyen descargar el archivo manualmente, usar CDNJS o npm install github-markdown-css. Se enlaza una página de demostración.
Una nota de solución de problemas explica que los problemas de estilo, como fuentes negras en tablas en modo oscuro, pueden deberse a que el navegador entra en modo quirks; incluir un doctype al inicio de la página evita esto. Para desarrollo, npm run make actualiza el CSS.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.