From 6f101c8029c25dec43602e15f295c240f21d139f Mon Sep 17 00:00:00 2001 From: Paul Valladares Date: Sat, 25 Nov 2023 05:14:09 -0600 Subject: i18n(es): Update `configuration` (#1147) Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- .../content/docs/es/reference/configuration.mdx | 73 ++++++++++++++++++++-- 1 file 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` +**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) -- cgit