Modo oscuro Shiki con laravel-markdown
Una de las mejores funcionalidades de laravel-markdown
es el resaltado de código en bloques. La librería de Spatie utiliza Shiki para realizar este resaltado. Sin embargo, si tienes una aplicación con modo oscuro, la configuración por defecto solo permite el resaltado usando un solo tema. Por defecto, laravel-markdown
utiliza el tema github-light
, pero podemos cambiarlo a un tema oscuro como github-dark
, eligiendo uno u otro.
A partir de la versión 2.6.0 de laravel-markdown
(gracias a @Barbapapazes), ahora es posible configurar Shiki con temas claros y oscuros.
En el archivo de configuración config/markdown.php
, cambiamos la configuración de code_highlighting.theme
a code_highlighting.themes
para poder pasar un array con los temas claros y oscuros que deseamos utilizar.
return [
'code_highlighting' => [
'themes' => [
'dark' => 'github-dark',
'light' => 'github-light',
],
],
];
Ahora Shiki para el resaltado de código utiliza variables de color, por lo que debemos ajustar el archivo CSS, resources/css/app.css
, que nuestra aplicación está utilizando, para cambiar el color de Shiki usando la media query de dark
.
@media (prefers-color-scheme: dark) {
.shiki,
.shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
}
}
Esta funcionalidad de temas claros y oscuros de Shiki no se limita a temas duales; también podemos configurar múltiples temas. Shiki utilizará variables de color para cada tema configurado. Hay más información en la documentación oficial de Shiki.