From 893bf6d0c93bc6f958a524ba12cb2216cc62535e Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Fri, 24 Nov 2023 16:29:24 -0600 Subject: [PATCH] i18n(es): Update `authoring-content` (#1136) Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> Co-authored-by: Chris Swithinbank --- .../docs/es/guides/authoring-content.md | 145 +++++++++++++++++- 1 file 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 5a0c6055c7c..c88d814bfab 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