i18n(es): Update `configuration` (#1147)

Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com>

1 files changed, 69 insertions, 4 deletions

diff --git a/docs/src/content/docs/es/reference/configuration.mdx b/docs/src/content/docs/es/reference/configuration.mdx
index e5bf94c8..ace34c83 100644
--- a/docs/src/content/docs/es/reference/configuration.mdx
+++ b/docs/src/content/docs/es/reference/configuration.mdx
@@ -130,7 +130,7 @@ Los grupos de enlaces se expanden de forma predeterminada. Puedes cambiar este c
 
 Los subgrupos generados automáticamente respetan por defecto la propiedad `collapsed` de su grupo padre. Puedes establecer la propiedad `autogenerate.collapsed` para anular esto.
 
-```js
+```js {5,16}
 sidebar: [
   // Un grupo colapsado de enlaces.
   {
@@ -156,7 +156,7 @@ sidebar: [
 
 Si tu sitio es multilingüe, se considera que la etiqueta de cada elemento está en el idioma predeterminado. Puedes establecer una propiedad de `translations` para proporcionar etiquetas en los otros idiomas que tu sitio admita:
 
-```js
+```js {5,9,14}
 sidebar: [
   // Un ejemplo de barra lateral con etiquetas traducidas al portugués de Brasil.
   {
@@ -216,7 +216,6 @@ interface BadgeConfig {
 Cada entrada debe usar el directorio donde se guardan los archivos de ese idioma como clave.
 
 ```js
-// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 
@@ -281,7 +280,7 @@ La dirección de escritura de este idioma; `"ltr"` para de izquierda a derecha (
 
 Puedes servir el idioma predeterminado sin un directorio `/lang/` estableciendo un idioma `root`:
 
-```js
+```js {3-6}
 starlight({
 	locales: {
 		root: {
@@ -346,6 +345,72 @@ starlight({
 });
 ```
 
+### `expressiveCode`
+
+**tipo:** `StarlightExpressiveCodeOptions | boolean`  
+**por defecto:** `true`
+
+Starlight usa [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) para renderizar bloques de código y agregar soporte para resaltar partes de ejemplos de código, agregar nombres de archivo a bloques de código y más.
+Consulta la [guía de “Bloques de código”](/es/guides/authoring-content/#bloques-de-código) para aprender a usar la sintaxis de Expressive Code en tu contenido Markdown y MDX.
+
+Puedes usar cualquier de las [opciones de configuración estándar de Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#configuration) así como algunas propiedades específicas de Starlight, estableciéndolas en la opción `expressiveCode` de Starlight.
+Por ejemplo, establece la opción `styleOverrides` de Expressive Code para anular el CSS predeterminado. Esto permite personalizaciones como darle a tus bloques de código esquinas redondeadas:
+
+```js ins={2-4}
+starlight({
+	expressiveCode: {
+		styleOverrides: { borderRadius: '0.5rem' },
+	},
+});
+```
+
+Si quieres deshabilitar Expressive Code, establece `expressiveCode: false` en tu configuración de Starlight:
+
+```js ins={2}
+starlight({
+	expressiveCode: false,
+});
+```
+
+Adicionalmente a las opciones estándar de Expressive Code, también puedes establecer las siguientes propiedades específicas de Starlight en tu configuración `expressiveCode` para personalizar aún más el comportamiento del tema para tus bloques de código:
+
+#### `themes`
+
+**tipo:** `Array<string | ThemeObject | ExpressiveCodeTheme>`  
+**por defecto:** `['starlight-dark', 'starlight-light']`
+
+Establece los temas utilizados para dar estilo a los bloques de código.
+Consulta la [documentación de temas de Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#themes) para obtener detalles de los formatos de tema admitidos.
+
+Starlight usa por defecto las variantes oscura y clara del [tema Night Owl](https://github.com/sdras/night-owl-vscode-theme) de Sarah Drasner.
+
+Si proporcionas por lo menos un tema oscuro y uno claro, Starlight mantendrá automáticamente el tema de bloque de código activo sincronizado con el tema actual del sitio.
+Configura este comportamiento con la opción [`useStarlightDarkModeSwitch`](#usestarlightdarkmodeswitch).
+
+#### `useStarlightDarkModeSwitch`
+
+**tipo:** `boolean`  
+**por defecto:** `true`
+
+Cuando sea `true`, los bloques de código cambian automáticamente entre temas claros y oscuros cuando cambia el tema del sitio.
+Cuando sea `false`, debes agregar manualmente CSS para manejar el cambio entre múltiples temas.
+
+:::note
+Cuando estableces `themes`, debes proporcionar por lo menos un tema oscuro y uno claro para que el interruptor de modo oscuro de Starlight funcione.
+:::
+
+#### `useStarlightUiThemeColors`
+
+**tipo:** `boolean`  
+**por defecto:** `true` si `themes` no está establecido, de lo contrario `false`
+
+Cuando sea `true`, se utilizan las variables CSS de Starlight para los colores de los elementos de la UI del bloque de código (fondos, botones, sombras, etc.), coincidiendo con el [tema de color del sitio](/es/guides/css-and-tailwind/#temas).
+Cuando sea `false`, se utilizan los colores proporcionados por el tema de resaltado de sintaxis activo para estos elementos.
+
+:::note
+Cuando usas temas personalizados y estableces esto en `true`, debes proporcionar por lo menos un tema oscuro y uno claro para asegurar un contraste de color adecuado.
+:::
+
 ### `head`
 
 **tipo:** [`HeadConfig[]`](#headconfig)