diff options
author | Paul Valladares | 2023-11-24 16:29:24 -0600 |
---|---|---|
committer | GitHub | 2023-11-24 23:29:24 +0100 |
commit | 893bf6d0c93bc6f958a524ba12cb2216cc62535e (patch) | |
tree | 1336e39b5325278c2ce468d5e4874844c5583109 | |
parent | fee7aa0a06eec923e0c926e82c23bdf343e20728 (diff) | |
download | IT.starlight-893bf6d0c93bc6f958a524ba12cb2216cc62535e.tar.gz IT.starlight-893bf6d0c93bc6f958a524ba12cb2216cc62535e.tar.bz2 IT.starlight-893bf6d0c93bc6f958a524ba12cb2216cc62535e.zip |
i18n(es): Update `authoring-content` (#1136)
Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
-rw-r--r-- | docs/src/content/docs/es/guides/authoring-content.md | 145 |
1 files changed, 142 insertions, 3 deletions
diff --git a/docs/src/content/docs/es/guides/authoring-content.md b/docs/src/content/docs/es/guides/authoring-content.md index 5a0c6055..c88d814b 100644 --- a/docs/src/content/docs/es/guides/authoring-content.md +++ b/docs/src/content/docs/es/guides/authoring-content.md @@ -201,9 +201,148 @@ var fun = function lang(l) { ``` ```` -```md -Los bloques de código largos de una sola línea no deben ajustarse automáticamente. Deben desplazarse horizontalmente si son demasiado largos. Esta línea debe ser lo suficientemente larga para demostrar esto. -``` +### Características de Expressive Code + +Starlight usa [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) para ampliar las posibilidades de formato de los bloques de código. +Los marcadores de texto de Expressive Code y los plugins de marcos de ventana están habilitados de forma predeterminada. +El renderizado de los bloques de código se puede configurar utilizando la opción de configuración [`expressiveCode`](/es/reference/configuration/#expressivecode) de Starlight. + +#### Marcadores de texto + +Puedes resaltar líneas específicas o partes de tus bloques de código utilizando [los marcadores de texto de Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) en la línea de apertura de tu bloque de código. +Usa llaves (`{ }`) para resaltar líneas enteras, y comillas para resaltar cadenas de texto. + +Hay tres estilos de resaltado: neutral para llamar la atención sobre el código, verde para indicar código insertado y rojo para indicar código eliminado. +Tanto el texto como las líneas enteras pueden marcarse con el marcador predeterminado, o en combinación con `ins=` y `del=` para producir el resaltado deseado. + +Expressive Code proporciona varias opciones para personalizar la apariencia visual de tus ejemplos de código. +Muchas de estas opciones se pueden combinar, para obtener ejemplos de código altamente ilustrativos. +Por favor, explora la [documentación de Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md) para ver las extensas opciones disponibles. +Algunos de los ejemplos más comunes se muestran a continuación: + +- [Marca líneas enteras y rangos de líneas usando el marcador `{ }`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges): + + ```js {2-3} + function demo() { + // Esta línea (#2) y la siguiente están resaltadas + retrun 'Esta es la línea #3 de este fragmento' + } + ``` + + ````md + ```js {2-3} + function demo() { + // Esta línea (#2) y la siguiente están resaltadas + return 'Esta es la línea #3 de este fragmento' + } + ``` + ```` + +- [Marca selecciones de texto usando el marcador `" "` o expresiones regulares](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines): + + ```js "Términos individuales" /También.*compatibles/ + // Términos individuales también pueden ser resaltados + function demo() { + return 'También las expresiones regulares son compatibles' + } + ``` + + ````md + ```js "Términos individuales" /También.*compatibles/ + // Términos individuales también pueden ser resaltados + function demo() { + return 'También las expresiones regulares son compatibles' + } + ``` + ```` + +- [Marca texto o líneas como insertadas o eliminadas con `ins` o `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del): + + ```js "return true;" ins="insertados" del="eliminados" + function demo() { + console.log('Estos son tipos de marcadores insertados y eliminados'); + // La declaración de retorno utiliza el tipo de marcador predeterminado + return true; + } + ``` + + ````md + ```js "return true;" ins="insertados" del="eliminados" + function demo() { + console.log('Estos son tipos de marcadores insertados y eliminados'); + // La declaración de retorno utiliza el tipo de marcador predeterminado + return true; + } + ``` + ```` + +- [Combina el resaltado de sintaxis con la sintaxis similar a `diff`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax): + + ```diff lang="js" + function thisIsJavaScript() { + // ¡El bloque completo se resalta como JavaScript, + // y aún podemos añadir marcadores de diferencias a él! + - console.log('Código antiguo a eliminar'') + + console.log('¡Nuevo y brillante código!') + } + ``` + + ````md + ```diff lang="js" + function thisIsJavaScript() { + // ¡El bloque completo se resalta como JavaScript, + // y aún podemos añadir marcadores de diferencias a él! + - console.log('Old code to be removed') + + console.log('New and shiny code!') + } + ``` + ```` + +#### Marcos y títulos + +Los bloques de código se pueden representar dentro de un marco similar a una ventana. +Un marco que se parece a una ventana de código se utilizará para todos los demás lenguajes de programación (por ejemplo, `bash`o `sh`). +Otros lenguajes se muestran dentro de un marco de estilo de editor de código si incluyen un título. + +Un título opcional del bloque de código se puede establecer con un atributo `title="..."` después de las comillas invertidas de apertura del bloque de código y el identificador del lenguaje, o con un comentario del nombre del archivo en las primeras líneas del código. + +- [Añade una pestaña con el nombre del archivo con un comentario](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) + + ```js + // mi-archivo-de-prueba.js + console.log('¡Hola mundo!'); + ``` + + ````md + ```js + // mi-archivo-de-prueba.js + console.log('¡Hola mundo!'); + ``` + ```` + +- [Agrega un título a la ventana Terminal](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) + + ```bash title="Instalando dependencias…" + npm install + ``` + + ````md + ```bash title="Instalando dependencias…" + npm install + ``` + ```` + +- [Desactiva los marcos de ventana con `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types) + + ```bash frame="none" + echo "Esto no se renderiza como una terminal a pesar de usar el lenguaje bash" + ``` + + ````md + ```bash frame="none" + echo "Esto no se renderiza como una terminal a pesar de usar el lenguaje bash" + ``` + ```` ## Otras características comunes de Markdown |