En breve me enfrasco en la creación de nuevos materiales docentes para nuevos cursos de formación del profesorado. Y, como no, tengo una necesidad imperiosa de decidir primero “cómo se van a ver” y cuál será su “contenedor” antes de empezar a crear los detalles del contenidos concreto.

De un tiempo a esta parte estoy favorecienfo bastante el uso de Joplin (dentro de Moodle), aquí hablo de ello:

Si alguna vez has intentado crear materiales de formación decentes en Joplin, sabes exactamente de qué hablo. Las notas quedan… funcionales. Tirando a sosas. El markdown hace su trabajo, pero cuando tienes que presentar un manual a docentes o preparar un itinerario formativo, «funcional» no siempre es suficiente. Por eso creé y puse a libre disposición hace unos cuatro meses el código CSS que “viste” visualmente el código markdown.

Y aunque me encanta la herramienta, echaba en falta poder darle un aspecto más cuidado sin abandonar la comodidad del markdown.

La solución: una nueva hoja de estilos personalizada. El resultado: CEFIRE CSS v2.0, disponible en GitHub para quien quiera usarla, adaptarla o mejorarla. En principio usa una paleta visual de colores seguiendo la imagen visual oficial del CEFIRE, el conglomerado de centros de formación del profesarado de la Comunidad Valenciana.

---

¿Qué hace exactamente?

Lo primero que necesitaba era coherencia visual con la imagen corporativa del CEFIRE — ese degradado verde-azul que seguramente reconocéis si habéis pasado por alguna de sus plataformas. Pero más allá del color, lo que me interesaba era tener elementos visuales que ayudaran a estructurar el contenido de forma pedagógica, sin necesitar un editor web completo ni salir del flujo de escritura.

En v2.0 el CSS incluye:

• Cajas de aviso con título integrado (b-blue, b-red, b-cefire…) en ocho colores, con una cabecera estilizada opcional
• Cajas desplegables que combinan <details> con el mismo diseño visual — ideales para contenido opcional o ampliaciones
• Barras de progreso para visualizar avance o porcentajes
• Stat boxes para destacar cifras clave de un vistazo
• Badges inline para etiquetar contenidos (obligatorio, en progreso, completado…)
• Pasos numerados automáticos sin tener que contar a mano
• Separadores de sección con etiqueta, indicadores de nivel y citas con autor
• Listas de definición estilizadas (compatible con el plugin markdown-it-deflist)
• Tabla de contenidos numerada que sincroniza con la numeración automática de los encabezados

Todo con una paleta accesible (WCAG AA) y pensado para mantener el equilibrio entre la sencillez del markdown y la capacidad de producir materiales visualmente coherentes con los principios del Diseño Instruccional. La idea no es convertir Joplin en InDesign — es añadir lo justo para que el contenido respire mejor.

---

¿Cómo se usa?

Dos opciones:

La más sencilla: copia el contenido de cefire_custom.css y pégalo en Joplin → Preferencias → Apariencia → Hoja de estilos personalizada para Markdown renderizado. Reinicias y listo.

La más flexible: crea una nota en Joplin con el CSS y luego importa ese estilo en las notas que quieras con una línea de HTML, gracias al plugin Import Local CSS. Así puedes tener varios estilos conviviendo según el tipo de material.

---

Una nota sobre el código

Aunque el CSS lleva la imagen del CEFIRE, el código es completamente libre. Si trabajas en otro centro, administración o empresa y quieres adaptarlo a tu paleta corporativa, todo está documentado y comentado por secciones. Cambiar los colores principales es cuestión de editar unas pocas variables CSS al principio del archivo.

Puedes encontrar el repositorio, la referencia rápida y un documento de demostración visual en GitHub:

👉 github.com/JLMirallesB/CEFIRE_CSS

Si lo usas, lo adaptas o simplemente te resulta útil, me alegra saberlo. Y si encuentras algún fallo o tienes una idea para mejorarlo, los issues y las PRs están abiertos.

Y si crees que te resulta útil y quieres seguir apoyando el proyecto, puedes invitarme a una horxata!