Temas de sintaxis

Los bloques de código con una clase language-* se resaltan al compilar con textlane, que ejecuta las gramáticas y los temas TextMate de VS Code y produce el mismo marcado que Shiki. Cada token lleva el color del tema claro y el del oscuro como variable --shiki-dark, que el tema usa con el selector y la preferencia del lector, así que el código también cambia, sin scripts ni parpadeos.

Configuración

Los valores predeterminados son los de Livemark:

codeThemeLight: catppuccin-latte
codeThemeDark: catppuccin-mocha

Funciona cualquiera de los ~60 temas integrados; puedes verlos en el playground de Shiki. Un nombre desconocido hace fallar la compilación. El marco, el fondo y la fuente del bloque siguen viniendo de styles/content.css.

Combinaciones populares

• catppuccin-latte / catppuccin-mocha (la predeterminada)
• github-light / github-dark
• one-light / one-dark-pro
• solarized-light / solarized-dark
• rose-pine-dawn / rose-pine
• vitesse-light / vitesse-dark

Una nota sobre accesibilidad

Sean cuales sean los colores que des al código, comprueba cada uno contra el fondo del bloque de código con una herramienta de contraste antes de publicar. El umbral necesario para texto de tamaño normal es 4.5:1 (WCAG AA). Las cadenas verdes de catppuccin-latte no alcanzan ese umbral sobre blanco, así que htmlpress las oscurece de #40a02b a #2a7e16, como hace Livemark.

Ver también

• Code Blocks: la parte de redacción.
• Sobrescritura/Escape: reemplaza los estilos de código del tema o el script del botón de copiar.