diff --git a/es/code.mdx b/es/code.mdx index cf2b48e5c..8334d04b4 100644 --- a/es/code.mdx +++ b/es/code.mdx @@ -1,6 +1,6 @@ --- title: "Código" -description: "Muestra código en línea y bloques de código" +description: "Mostrar código en línea y bloques de código" icon: "code" --- @@ -8,30 +8,30 @@ icon: "code" ## Agregar ejemplos de código -Puedes agregar fragmentos de código en línea o bloques de código. Los bloques de código admiten opciones meta para el resaltado de sintaxis, títulos, resaltado de líneas, icon y más. +Puedes agregar fragmentos de código en línea o bloques de código. Los bloques de código admiten opciones meta para el resaltado de sintaxis, títulos, resaltado de líneas, íconos y más.
### Código en línea
-Para indicar una `palabra` o `frase` como código, enciérrala entre comillas invertidas (`). +Para indicar una `palabra` o `frase` como código, colócala entre acentos graves (`). ```mdx -Para marcar una `palabra` o `frase` como código, enciérrala entre comillas invertidas (`). +Para indicar una `palabra` o `frase` como código, enciérrala entre acentos graves (`). ```
### Bloques de código
-Usa [bloques de código con cercas](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) encerrando el código entre tres comillas invertidas (backticks). Los bloques de código se pueden copiar y, si tienes el assistant habilitado, los usuarios pueden pedirle a la IA que explique el código. +Usa [bloques de código con cercas](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) encerrando el código entre tres acentos invertidos. Los bloques de código se pueden copiar y, si tienes el Asistente habilitado, los usuarios pueden pedir a la IA que explique el código. -Especifica el lenguaje de programación para el resaltado de sintaxis y para habilitar opciones meta. Agrega cualquier opción meta, como un Título o icon, después del lenguaje. +Especifica el lenguaje de programación para el resaltado de sintaxis y para habilitar opciones meta. Agrega cualquier opción meta, como un título o un ícono, después del lenguaje. ```java HelloWorld.java lines icon="java" class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("¡Hola, mundo!"); } } ``` @@ -40,43 +40,41 @@ class HelloWorld { ```java HelloWorld.java lines icon="java" class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("¡Hola, mundo!"); } } ``` ````
- ## Opciones de bloque de código + ## Opciones de bloques de código
-Puedes añadir opciones de metadatos a tus bloques de código para personalizar su apariencia. +Puedes añadir opciones meta a tus bloques de código para personalizar su apariencia. - Debes especificar un lenguaje de programación para un bloque de código antes de añadir cualquier otra opción de metadatos. + Debes especificar un lenguaje de programación para un bloque de código antes de añadir cualquier otra opción meta.
- ### Sintaxis de las opciones + ### Sintaxis de opciones
-* **Opciones de cadena y booleanas**: Envuélvelas con `""`, `''` o sin comillas. -* **Opciones de expresión**: Envuélvelas con `{}`, `""` o `''`. +* **Opciones de tipo string y booleanas**: Envuelve con `""`, `''` o sin comillas. +* **Opciones de expresión**: Envuelve con `{}`, `""` o `''`.
### Resaltado de sintaxis
-Activa el resaltado de sintaxis indicando el lenguaje de programación después de las comillas invertidas de apertura de un bloque de código. +Activa el resaltado de sintaxis especificando el lenguaje de programación después de las comillas invertidas de apertura de un bloque de código. Usamos [Shiki](https://shiki.style/) para el resaltado de sintaxis y admitimos todos los lenguajes disponibles. Consulta la lista completa de [lenguajes](https://shiki.style/languages) en la documentación de Shiki. -Personaliza globalmente los temas de los bloques de código usando `styling.codeblocks` en tu archivo `docs.json`. Establece temas simples como `system` o `dark`, o configura [temas de Shiki](https://shiki.style/themes) personalizados para los modos claro y oscuro. Consulta [Configuración](/es/settings#styling) para ver opciones de configuración detalladas. - ```java class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("¡Hola, mundo!"); } } ``` @@ -85,7 +83,7 @@ class HelloWorld { ```java class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("¡Hola, mundo!"); } } ``` @@ -95,14 +93,14 @@ class HelloWorld { ### Título -Añade un título para identificar tu ejemplo de código. Usa `title="Your title"` o una cadena en una sola línea. +Añade un título para etiquetar tu ejemplo de código. Usa `title="Your title"` o una cadena en una sola línea. -```javascript Code Block Example +```javascript Ejemplo de bloque de código const hello = "mundo"; ``` ````mdx -```javascript Ejemplo de Bloque de Código +```javascript Ejemplo de bloque de código const hello = "world"; ``` ```` @@ -114,7 +112,7 @@ const hello = "world"; Agrega un icono a tu bloque de código usando la propiedad `icon`. Consulta [Iconos](/es/components/icons) para ver todas las opciones disponibles. ```javascript icon="square-js" -const hello = "mundo"; +const hello = "world"; ``` ````mdx @@ -127,10 +125,10 @@ const hello = "world"; ### Resaltado de líneas -Resalta líneas específicas en tus bloques de código usando `highlight` con los números o rangos de líneas que deseas resaltar. +Resalta líneas específicas en tus bloques de código usando `highlight` con los números o rangos de líneas que quieras resaltar. -```javascript Line Highlighting Example highlight= {1-2,5} -const greeting = "¡Hola, Mundo!"; +```javascript Ejemplo de resalte de líneas highlight= {1-2,5} +const greeting = "¡Hola, mundo!"; function sayHello() { console.log(greeting); } @@ -138,12 +136,12 @@ sayHello(); ``` ````mdx -```javascript Ejemplo de Resaltado de Líneas highlight={1-2,5} -const greeting = "Hello, World!"; -function sayHello() { - console.log(greeting); +```javascript Ejemplo de resaltado de líneas highlight={1-2,5} +const saludo = "¡Hola, mundo!"; +function decirHola() { + console.log(saludo); } -sayHello(); +decirHola(); ``` ```` @@ -151,19 +149,20 @@ sayHello(); ### Enfoque de líneas -Enfoca líneas específicas en tus bloques de código usando `focus` con números de línea o rangos. +Resalta líneas específicas en tus bloques de código usando `focus` con números de línea o rangos. +---MDX_CONTENTEND--- -```javascript Line Focus Example focus= {2,4-5} -const greeting = "¡Hola, Mundo!"; -function sayHello() { +```javascript Ejemplo de enfoque de línea focus= {2,4-5} +const greeting = "¡Hola, mundo!"; +function decirHola() { console.log(greeting); } -sayHello(); +decirHola(); ``` ````mdx -```javascript Ejemplo de Enfoque de Línea focus={2,4-5} -const greeting = "Hello, World!"; +```javascript Ejemplo de enfoque de líneas focus={2,4-5} +const greeting = "¡Hola, mundo!"; function sayHello() { console.log(greeting); } @@ -175,19 +174,19 @@ sayHello(); ### Mostrar números de línea -Muestra los números de línea en el lado izquierdo de tu bloque de código con `lines`. +Muestra los números de línea en el lado izquierdo de tu bloque de código usando `lines`. -```javascript Show Line Numbers Example lines -const greeting = "¡Hola, Mundo!"; -function sayHello() { +```javascript Mostrar números de línea Ejemplo de líneas +const greeting = "¡Hola, mundo!"; +function decirHola() { console.log(greeting); } -sayHello(); +decirHola(); ``` ````mdx -```javascript Mostrar números de línea Ejemplo -const greeting = "Hello, World!"; +```javascript Mostrar números de línea Ejemplo líneas +const greeting = "¡Hola, mundo!"; function sayHello() { console.log(greeting); } @@ -199,9 +198,9 @@ sayHello(); ### Expandible -Permite que los usuarios expandan y contraigan bloques de código largos con `expandable`. +Permite que los usuarios expandan y contraigan bloques de código largos usando `expandable`. -```python Expandable Example expandable +```python Ejemplo expandible expandable from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -221,7 +220,7 @@ class Library: def add_book(self, book: Book) -> None: if book.isbn in self.books: - raise ValueError(f"El libro con ISBN {book.isbn} ya existe") + raise ValueError(f"Ya existe un libro con el ISBN {book.isbn}") self.books[book.isbn] = book def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None: @@ -230,13 +229,13 @@ class Library: book = self.books.get(isbn) if not book: - raise ValueError("Libro no encontrado") + raise ValueError("No se encontró el libro") if book.checked_out: raise ValueError("El libro ya está prestado") if len(self.checkouts[patron]) >= 3: - raise ValueError("El usuario ha alcanzado el límite de préstamos") + raise ValueError("El usuario alcanzó el límite de préstamos") book.checked_out = True book.due_date = datetime.now() + timedelta(days=days) @@ -245,7 +244,7 @@ class Library: def return_book(self, isbn: str) -> float: book = self.books.get(isbn) if not book or not book.checked_out: - raise ValueError("Libro no encontrado o no está prestado") + raise ValueError("No se encontró el libro o no está prestado") late_fee = 0.0 if datetime.now() > book.due_date: @@ -255,7 +254,7 @@ class Library: book.checked_out = False book.due_date = None - # Eliminar de los préstamos del usuario + # Quitar de los préstamos del usuario for patron, books in self.checkouts.items(): if isbn in books: books.remove(isbn) @@ -292,7 +291,7 @@ if __name__ == "__main__": ``` ````mdx -```python Ejemplo Expandible expandable +```python Ejemplo desplegable expandable from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -308,10 +307,10 @@ if __name__ == "__main__": ### Ajuste -Activa el ajuste de texto para líneas largas con `wrap`. Esto evita el desplazamiento horizontal y facilita la lectura de líneas extensas. +Habilita el ajuste de texto para líneas largas con `wrap`. Esto evita el desplazamiento horizontal y facilita la lectura de líneas extensas. -```javascript Wrap Example wrap -const greeting = "¡Hola, Mundo! Soy una línea larga de texto que se ajustará a la siguiente línea."; +```javascript Ejemplo de ajuste wrap +const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea."; function sayHello() { console.log(greeting); } @@ -319,8 +318,8 @@ sayHello(); ``` ````mdx -```javascript Ejemplo de Ajuste wrap -const greeting = "¡Hola, Mundo! Soy una línea larga de texto que se ajustará a la siguiente línea."; +```javascript Ejemplo de ajuste wrap +const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea."; function sayHello() { console.log(greeting); } @@ -334,7 +333,7 @@ sayHello(); Muestra un diff visual de las líneas añadidas o eliminadas en tus bloques de código. Las líneas añadidas se resaltan en verde y las eliminadas en rojo. -Para crear diffs, añade estos comentarios especiales al final de las líneas en tu bloque de código: +Para crear diffs, agrega estos comentarios especiales al final de las líneas en tu bloque de código: * `// [!code ++]`: Marca una línea como añadida (resaltado en verde). * `// [!code --]`: Marca una línea como eliminada (resaltado en rojo). @@ -344,22 +343,22 @@ Para varias líneas consecutivas, especifica el número de líneas después de d * `// [!code ++:3]`: Marca la línea actual más las dos siguientes como añadidas. * `// [!code --:5]`: Marca la línea actual más las cuatro siguientes como eliminadas. -La sintaxis del comentario debe coincidir con tu lenguaje de programación (por ejemplo, `//` para JavaScript o `#` para Python). +La sintaxis de los comentarios debe coincidir con tu lenguaje de programación (por ejemplo, `//` para JavaScript o `#` para Python). -```js Diff Example icon="code" lines -const greeting = "¡Hola, Mundo!"; // [!code ++] +```js Ejemplo de diff icon="code" lines +const greeting = "¡Hola, mundo!"; // [!code ++] function sayHello() { - console.log("¡Hola, Mundo!"); // [!code --] + console.log("¡Hola, mundo!"); // [!code --] console.log(greeting); // [!code ++] } sayHello(); ``` ````text -```js Ejemplo de Diff icon="code" lines -const greeting = "Hello, World!"; // [!code ++] +```js Diff Example icon="code" lines +const greeting = "¡Hola, mundo!"; // [!code ++] function sayHello() { - console.log("Hello, World!"); // [!code --] + console.log("¡Hola, mundo!"); // [!code --] console.log(greeting); // [!code ++] } sayHello(); diff --git a/es/components/code-groups.mdx b/es/components/code-groups.mdx index c02e9a89e..688ea738d 100644 --- a/es/components/code-groups.mdx +++ b/es/components/code-groups.mdx @@ -4,49 +4,51 @@ description: "Muestra varios ejemplos de código en un solo componente" icon: "group" --- -Usa el componente `CodeGroup` para mostrar varios bloques de código en una interfaz con Tabs, lo que permite a los usuarios comparar implementaciones en distintos lenguajes de programación o ver enfoques alternativos para la misma tarea. +Usa el componente `CodeGroup` para mostrar varios bloques de código en una interfaz con pestañas, lo que permite a los usuarios comparar implementaciones en distintos lenguajes de programación o ver enfoques alternativos para la misma tarea. - ```javascript helloWorld.js - console.log("Hello World"); - ``` - ```python hello_world.py - print('Hello World!') - ``` +```javascript helloWorld.js +console.log("Hello World"); +``` + +```python hello_world.py +print('Hello World!') +``` + +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` - ```java HelloWorld.java - class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } - } - ``` -Los grupos de código heredan los estilos globales de tu archivo `docs.json`. Personaliza tu tema usando `styling.codeblocks`. Consulta [Settings](/es/settings#styling) para ver las opciones de configuración. +
## Creación de grupos de código
-Para crear un grupo de código, envuelve varios bloques de código con etiquetas ``. Cada bloque de código debe incluir un título, que se convertirá en la etiqueta de la Tab. +Para crear un grupo de código, envuelve varios bloques de código con las etiquetas ``. Cada bloque de código debe incluir un título, que se convertirá en la etiqueta de la pestaña. ````mdx ```javascript helloWorld.js -console.log("Hola Mundo"); +console.log("Hello World"); ``` ```python hello_world.py -print('¡Hola Mundo!') +print('Hello World!') ``` ```java HelloWorld.java class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("Hello, World!"); } } ``` @@ -54,11 +56,12 @@ class HelloWorld { ```` +
- ## Menú desplegable de idiomas + ## Menú de idioma
-Puedes sustituir las pestañas de un grupo de código por un menú desplegable para cambiar entre idiomas usando la prop `dropdown`. +Puedes reemplazar las pestañas de un grupo de código por un menú desplegable para alternar entre idiomas usando la prop `dropdown`. ```javascript helloWorld.js @@ -82,17 +85,17 @@ Puedes sustituir las pestañas de un grupo de código por un menú desplegable p ```javascript helloWorld.js -console.log("Hola Mundo"); +console.log("Hola, mundo"); ``` ```python hello_world.py -print('¡Hola Mundo!') +print('Hola, mundo!') ``` ```java HelloWorld.java class HelloWorld { public static void main(String[] args) { - System.out.println("¡Hola, Mundo!"); + System.out.println("Hola, mundo!"); } } ``` diff --git a/es/settings.mdx b/es/settings.mdx index ae0719e26..308e7a839 100644 --- a/es/settings.mdx +++ b/es/settings.mdx @@ -47,9 +47,9 @@ Esta sección contiene la referencia completa del archivo `docs.json`. El tema de diseño de tu sitio. - Una de las siguientes opciones: `mint`, `maple`, `palm`, `willow`, `linden`, `almond`, `aspen`. + Una de las siguientes: `mint`, `maple`, `palm`, `willow`, `linden`, `almond`, `aspen`. - Consulta [Temas](es/themes) para obtener más información. + Consulta [Temas](es/themes) para más información. @@ -57,31 +57,31 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Los colores usados en tu documentación. Se aplican de forma distinta según el tema. Si solo proporcionas un color principal, se usará para todos los elementos de color. + Los colores usados en tu documentación. Los colores se aplican de forma diferente según el tema. Si solo proporcionas un color principal, se usará para todos los elementos de color. - El color principal de tu documentación. Generalmente se usa para destacar en el modo claro, con algunas variaciones según el tema. + El color principal de tu documentación. Generalmente se usa para resaltar en el modo claro, con alguna variación según el tema. - Debe ser un código hex que comience con `#`. + Debe ser un código hexadecimal que comience con `#`. - El color usado para destacar en el modo oscuro. + El color usado para el énfasis en el modo oscuro. - Debe ser un código hex que comience con `#`. + Debe ser un código hexadecimal que comience con `#`. - El color usado para botones y estados de hover tanto en modo claro como oscuro, con algunas variaciones según el tema. + El color usado para botones y estados de hover en los modos claro y oscuro, con alguna variación según el tema. - Debe ser un código hex que comience con `#`. + Debe ser un código hexadecimal que comience con `#`. - Descripción de tu sitio para SEO e indexación por IA. + Descripción de tu sitio para SEO e indexación en IA. @@ -97,7 +97,7 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - La URL a la que redirigir al hacer clic en el logotipo. Si no se proporciona, el logotipo enlazará con tu página de inicio. Ejemplo: `https://mintlify.com` + La URL a la que redirigir al hacer clic en el logotipo. Si no se proporciona, el logotipo enlazará a tu página de inicio. Ejemplo: `https://mintlify.com` @@ -118,11 +118,11 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Personalización de miniaturas para redes sociales y vistas previas de páginas. + Personalización de miniaturas para redes sociales y vistas previas de página. - El tema visual de tus miniaturas. Si no se especifica, las miniaturas usan el esquema de color de tu sitio definido en el campo `colors`. + El tema visual de tus miniaturas. Si no se especifica, las miniaturas usan el esquema de color de tu sitio definido por el campo `colors`. @@ -132,82 +132,35 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Configuración de estilo visual. + Configuraciones de estilo visual. - Estilo del eyebrow de la página. Elige `section` para mostrar el nombre de la sección o `breadcrumbs` para mostrar la ruta de navegación completa. De forma predeterminada es `section`. + El estilo del eyebrow de la página. Elige `section` para mostrar el nombre de la sección o `breadcrumbs` para mostrar la ruta de navegación completa. El valor predeterminado es `section`. - - Configuración del tema de los bloques de código. De forma predeterminada es `"system"`. - - **Opciones simples:** - - * `"system"`: Coincide con el modo actual del sitio (claro u oscuro) - * `"dark"`: Usa siempre el modo oscuro - - **Configuración de tema personalizada:** - Usa un objeto para especificar [temas de Shiki](https://shiki.style/themes). Elige un solo tema para ambos modos o temas separados para claro y oscuro. - - - - Un solo nombre de tema de Shiki para usar en los modos claro y oscuro. - - ```json - "styling": { - "codeblocks": { - "theme": "dracula" - } - } - ``` - - - - Temas separados para los modos claro y oscuro. - - - - Un nombre de tema de Shiki para el modo claro. - - - - Un nombre de tema de Shiki para el modo oscuro. - - - ```json - "styling": { - "codeblocks": { - "themes": { - "light": "github-light", - "dark": "github-dark" - } - } - } - ``` - - - + + El tema de los bloques de código. Elige `system` para que coincida con el tema del sitio o `dark` para bloques de código siempre oscuros. El valor predeterminado es `system`. - Ajustes de la biblioteca de iconos. + Configuración de la biblioteca de íconos. - Biblioteca de iconos que se usará en toda tu documentación. De forma predeterminada es `fontawesome`. + Biblioteca de íconos que se usará en toda tu documentación. De forma predeterminada es `fontawesome`. - Puedes especificar una URL a un icono alojado externamente, la ruta a un archivo de icono en tu proyecto o código SVG compatible con JSX para cualquier icono individual, independientemente de la configuración de la biblioteca. + Puedes especificar una URL a un ícono alojado externamente, la ruta a un archivo de ícono en tu proyecto o código SVG compatible con JSX para cualquier ícono individual, independientemente de la configuración de la biblioteca. - Configuración tipográfica para tu documentación. La fuente predeterminada es [Inter](https://fonts.google.com/specimen/Inter). + Configuración de fuentes para tu documentación. La fuente predeterminada es [Inter](https://fonts.google.com/specimen/Inter). @@ -215,11 +168,11 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables permiten pesos precisos como 550. + Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables admiten pesos precisos como 550. - URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source. + URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no se necesita una URL de source. @@ -227,7 +180,7 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Sobrescribe la configuración tipográfica específicamente para los encabezados. + Anula la configuración de la fuente específicamente para los encabezados. @@ -235,11 +188,11 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables permiten pesos precisos como 550. + Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables admiten pesos precisos como 550. - URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source. + URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no se necesita una URL de source. @@ -249,7 +202,7 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Sobrescribe la configuración tipográfica específicamente para el texto del cuerpo. + Anula la configuración de la fuente específicamente para el texto del cuerpo. @@ -257,11 +210,11 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables permiten pesos precisos como 550. + Peso de la fuente, por ejemplo, 400 o 700. Las fuentes variables admiten pesos precisos como 550. - URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source. + URL del origen de la fuente, por ejemplo, https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) se carga automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no se necesita una URL de source. @@ -273,15 +226,15 @@ Esta sección contiene la referencia completa del archivo `docs.json`. - Configuración del selector de modo claro/oscuro. + Configuración del conmutador de modo claro/oscuro. - Modo de tema predeterminado. Elige `system` para ajustarse a la configuración del sistema operativo del usuario, o `light` o `dark` para forzar un modo específico. De forma predeterminada es `system`. + Modo de tema predeterminado. Elige `system` para ajustarte a la configuración del SO del usuario, o `light` o `dark` para forzar un modo específico. De forma predeterminada es `system`. - Si se debe ocultar el selector de modo claro/oscuro. De forma predeterminada es `true`. + Si se debe ocultar el conmutador de modo claro/oscuro. De forma predeterminada es `true`. diff --git a/fr/code.mdx b/fr/code.mdx index a63a75566..fd38c0aa1 100644 --- a/fr/code.mdx +++ b/fr/code.mdx @@ -1,6 +1,6 @@ --- title: "Code" -description: "Afficher du code en ligne et des code blocks" +description: "Afficher le code en ligne et les blocs de code" icon: "code" --- @@ -8,30 +8,30 @@ icon: "code" ## Ajout d’exemples de code -Vous pouvez ajouter des extraits de code en ligne ou des code blocks. Les code blocks prennent en charge des options méta pour la coloration syntaxique, les titles, la mise en évidence de lignes, les icons, et plus encore. +Vous pouvez ajouter du code en ligne ou des blocs de code. Les blocs de code prennent en charge des options méta pour la coloration syntaxique, les titres, la mise en évidence de lignes, les icônes, et plus encore.
### Code en ligne
-Pour indiquer qu’un `mot` ou une `expression` est du code, encadrez-le avec des accents graves (`). +Pour indiquer qu’un `mot` ou une `expression` est du code, entourez-le de backticks (`). ```mdx -Pour désigner un `mot` ou une `phrase` comme du code, entourez-le de backticks (`). +Pour indiquer qu’un « mot » ou une « expression » est du code, entourez-le de backticks (`). ```
- ### Code blocks + ### Blocs de code
-Utilisez des [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) en entourant le code de trois backticks. Les code blocks sont copiables et, si vous avez activé l’Assistant, les utilisateurs peuvent demander à l’IA d’expliquer le code. +Utilisez des [blocs de code délimités](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) en encadrant le code de trois accents graves. Les blocs de code sont copiables et, si l’Assistant est activé, les utilisateurs peuvent demander à l’IA d’expliquer le code. -Indiquez le langage de programmation pour la coloration syntaxique et pour activer les options méta. Ajoutez toutes les options méta, comme un title ou un icon, après le langage. +Indiquez le langage de programmation pour la coloration syntaxique et pour activer les options méta. Ajoutez les options méta, comme un titre ou une icône, après le langage. -```java HelloWorld.java lines icon="java" +```java HelloWorld.java lignes icône="java" class HelloWorld { public static void main(String[] args) { - System.out.println("Bonjour, monde !"); + System.out.println("Bonjour, le monde !"); } } ``` @@ -40,43 +40,41 @@ class HelloWorld { ```java HelloWorld.java lines icon="java" class HelloWorld { public static void main(String[] args) { - System.out.println("Bonjour le monde !"); + System.out.println("Bonjour, monde !"); } } ``` ````
- ## Options de code block + ## Options des blocs de code
-Vous pouvez ajouter des options méta à vos code blocks pour personnaliser leur apparence. +Vous pouvez ajouter des options méta à vos blocs de code pour personnaliser leur apparence. - Vous devez spécifier un langage de programmation pour un code block avant d'ajouter d'autres options méta. + Vous devez indiquer un langage de programmation pour un bloc de code avant d’ajouter toute autre option méta.
### Syntaxe des options
-* **Options de chaînes et booléens** : Encadrez avec `""`, `''` ou sans guillemets. -* **Options d’expression** : Encadrez avec `{}`, `""` ou `''`. +* **Options de type chaîne et booléen** : Entourez-les avec `""`, `''`, ou ne mettez pas de guillemets. +* **Options d’expression** : Entourez-les avec `{}`, `""`, ou `''`.
### Coloration syntaxique
-Activez la coloration syntaxique en indiquant le langage de programmation après les backticks ouvrants d’un code block. +Activez la coloration syntaxique en spécifiant le langage de programmation après les backticks d’ouverture d’un bloc de code. -Nous utilisons [Shiki](https://shiki.style/) pour la coloration syntaxique et prenons en charge tous les langages disponibles. Consultez la liste complète des [langages](https://shiki.style/languages) dans la documentation de Shiki. - -Personnalisez les thèmes des code blocks à l’échelle du site avec `styling.codeblocks` dans votre fichier `docs.json`. Définissez des thèmes simples comme `system` ou `dark`, ou configurez des [thèmes Shiki](https://shiki.style/themes) personnalisés pour les modes clair et sombre. Consultez [Paramètres](/fr/settings#styling) pour des options de configuration détaillées. +Nous utilisons [Shiki](https://shiki.style/) pour la coloration syntaxique et prenons en charge toutes les langues disponibles. Consultez la liste complète des [langues](https://shiki.style/languages) dans la documentation de Shiki. ```java class HelloWorld { public static void main(String[] args) { - System.out.println("Bonjour, monde !"); + System.out.println("Bonjour, le monde !"); } } ``` @@ -95,10 +93,10 @@ class HelloWorld { ### Titre -Ajoutez un titre pour identifier votre exemple de code. Utilisez `title="Your title"` ou une chaîne sur une seule ligne. +Ajoutez un titre pour identifier votre exemple de code. Utilisez `title="Votre titre"` ou une chaîne sur une seule ligne. -```javascript Code Block Example -const hello = "monde"; +```javascript Exemple de bloc de code +const hello = "world"; ``` ````mdx @@ -111,15 +109,15 @@ const hello = "world"; ### Icône -Ajoutez un icon à votre code block à l'aide de la propriété `icon`. Voir [Icônes](/fr/components/icons) pour toutes les options disponibles. +Ajoutez une icône à votre bloc de code à l’aide de la propriété `icon`. Consultez [Icônes](/fr/components/icons) pour voir toutes les options disponibles. ```javascript icon="square-js" -const hello = "monde"; +const hello = "world"; ``` ````mdx ```javascript icon="square-js" -const hello = "world"; +const hello = "monde"; ``` ```` @@ -127,19 +125,19 @@ const hello = "world"; ### Surlignage de lignes -Mettez en surbrillance des lignes spécifiques dans vos code blocks en utilisant `highlight` avec les numéros de lignes ou les plages que vous souhaitez mettre en évidence. +Mettez en surbrillance des lignes spécifiques dans vos blocs de code à l’aide de `highlight`, en indiquant les numéros de ligne ou les plages à mettre en évidence. -```javascript Line Highlighting Example highlight= {1-2,5} -const greeting = "Bonjour, le monde !"; -function sayHello() { +```javascript Exemple de surlignage de lignes highlight= {1-2,5} +const greeting = "Bonjour, monde !"; +function direBonjour() { console.log(greeting); } -sayHello(); +direBonjour(); ``` ````mdx -```javascript Exemple de mise en évidence de lignes highlight={1-2,5} -const greeting = "Hello, World!"; +```javascript Exemple de surlignage de lignes highlight={1-2,5} +const greeting = "Bonjour, monde !"; function sayHello() { console.log(greeting); } @@ -151,19 +149,19 @@ sayHello(); ### Mise au point sur des lignes -Concentrez-vous sur des lignes spécifiques dans vos code block en utilisant `focus` avec des numéros de ligne ou des intervalles. +Mettez en évidence des lignes spécifiques dans vos blocs de code à l’aide de `focus` avec des numéros de ligne ou des plages. -```javascript Line Focus Example focus= {2,4-5} -const greeting = "Bonjour, le monde !"; -function sayHello() { +```javascript Exemple de mise au point sur les lignes focus= {2,4-5} +const greeting = "Bonjour, monde !"; +function direBonjour() { console.log(greeting); } -sayHello(); +direBonjour(); ``` ````mdx -```javascript Exemple de mise en évidence de ligne focus={2,4-5} -const greeting = "Hello, World!"; +```javascript Exemple de surlignage de lignes focus={2,4-5} +const greeting = "Bonjour, le monde !"; function sayHello() { console.log(greeting); } @@ -175,19 +173,19 @@ sayHello(); ### Afficher les numéros de ligne -Affichez les numéros de ligne à gauche de votre code block avec `lines`. +Affichez les numéros de ligne à gauche de votre bloc de code avec `lines`. -```javascript Show Line Numbers Example lines -const greeting = "Bonjour, le monde !"; -function sayHello() { +```javascript Afficher les numéros de ligne Exemple de lignes +const greeting = "Bonjour, monde !"; +function direBonjour() { console.log(greeting); } -sayHello(); +direBonjour(); ``` ````mdx -```javascript Show Line Numbers Exemple lines -const greeting = "Hello, World!"; +```javascript Afficher les numéros de ligne Exemples de lignes +const greeting = "Bonjour, le monde !"; function sayHello() { console.log(greeting); } @@ -199,9 +197,9 @@ sayHello(); ### Dépliable -Permettez aux utilisateurs d’ouvrir et de replier de longs code block à l’aide de `expandable`. +Permettez aux utilisateurs d’ouvrir et de réduire de longs blocs de code à l’aide de `expandable`. -```python Expandable Example expandable +```python Exemple extensible extensible from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -217,11 +215,11 @@ class Book: class Library: def __init__(self): self.books: Dict[str, Book] = {} - self.checkouts: Dict[str, List[str]] = {} # usager -> liste des ISBN + self.checkouts: Dict[str, List[str]] = {} # patron -> list of ISBNs def add_book(self, book: Book) -> None: if book.isbn in self.books: - raise ValueError(f"Livre avec l'ISBN {book.isbn} existe déjà") + raise ValueError(f"Un livre avec l’ISBN {book.isbn} existe déjà") self.books[book.isbn] = book def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None: @@ -236,7 +234,7 @@ class Library: raise ValueError("Le livre est déjà emprunté") if len(self.checkouts[patron]) >= 3: - raise ValueError("L'usager a atteint la limite d'emprunt") + raise ValueError("L’usager a atteint la limite d’emprunts") book.checked_out = True book.due_date = datetime.now() + timedelta(days=days) @@ -255,7 +253,7 @@ class Library: book.checked_out = False book.due_date = None - # Retirer des emprunts de l'usager + # Retirer des emprunts de l’usager for patron, books in self.checkouts.items(): if isbn in books: books.remove(isbn) @@ -282,17 +280,17 @@ def main(): for book in books: library.add_book(book) - # Exemple d'emprunt et de retour + # Exemple d’emprunt et de retour library.checkout_book("978-0-261-10295-4", "patron123") late_fee = library.return_book("978-0-261-10295-4") - print(f"Frais de retard : {late_fee:.2f} $") + print(f"Frais de retard : {late_fee:.2f} $") if __name__ == "__main__": main() ``` ````mdx -```python Exemple extensible expandable +```python Exemple extensible from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -308,10 +306,10 @@ if __name__ == "__main__": ### Retour à la ligne -Activez l’habillage du texte pour les lignes longues avec `wrap`. Cela évite le défilement horizontal et facilite la lecture des lignes longues. +Activez le renvoi à la ligne pour les longues lignes avec `wrap`. Cela évite le défilement horizontal et facilite la lecture des lignes longues. -```javascript Wrap Example wrap -const greeting = "Bonjour, le monde ! Je suis une longue ligne de texte qui va passer à la ligne suivante."; +```javascript Exemple d’habillage +const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui passera à la ligne suivante."; function sayHello() { console.log(greeting); } @@ -319,8 +317,8 @@ sayHello(); ``` ````mdx -```javascript Exemple de retour à la ligne -const greeting = "Bonjour, le monde ! Je suis une longue ligne de texte qui va se retourner à la ligne suivante."; +```javascript Exemple d’habillage wrap +const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui va se poursuivre à la ligne suivante."; function sayHello() { console.log(greeting); } @@ -332,34 +330,34 @@ sayHello(); ### Diff -Affichez un diff visuel des lignes ajoutées ou supprimées dans vos code blocks. Les lignes ajoutées sont mises en évidence en vert et les lignes supprimées en rouge. +Affichez un diff visuel des lignes ajoutées ou supprimées dans vos blocs de code. Les lignes ajoutées sont mises en évidence en vert et les lignes supprimées en rouge. -Pour créer des diffs, ajoutez ces commentaires spéciaux à la fin des lignes dans votre code block : +Pour créer des diffs, ajoutez ces commentaires spéciaux à la fin des lignes dans votre bloc de code : -* `// [!code ++]` : Marquez une ligne comme ajoutée (mise en évidence en vert). -* `// [!code --]` : Marquez une ligne comme supprimée (mise en évidence en rouge). +* `// [!code ++]` : Indique qu’une ligne a été ajoutée (mise en évidence en vert). +* `// [!code --]` : Indique qu’une ligne a été supprimée (mise en évidence en rouge). -Pour plusieurs lignes consécutives, indiquez le nombre de lignes après un deux-points : +Pour plusieurs lignes consécutives, spécifiez le nombre de lignes après un deux-points : -* `// [!code ++:3]` : Marquez la ligne actuelle plus les deux suivantes comme ajoutées. -* `// [!code --:5]` : Marquez la ligne actuelle plus les quatre suivantes comme supprimées. +* `// [!code ++:3]` : Indique que la ligne actuelle plus les deux suivantes ont été ajoutées. +* `// [!code --:5]` : Indique que la ligne actuelle plus les quatre suivantes ont été supprimées. La syntaxe des commentaires doit correspondre à votre langage de programmation (par exemple, `//` pour JavaScript ou `#` pour Python). -```js Diff Example icon="code" lines -const greeting = "Bonjour, le monde !"; // [!code ++] +```js Exemple de diff icon="code" lines +const greeting = "Bonjour, monde !"; // [!code ++] function sayHello() { - console.log("Bonjour, le monde !"); // [!code --] + console.log("Bonjour, monde !"); // [!code --] console.log(greeting); // [!code ++] } sayHello(); ``` ````text -```js Exemple Diff icon="code" lines -const greeting = "Hello, World!"; // [!code ++] +```js Exemple de diff icon="code" lines +const greeting = "Bonjour, monde !"; // [!code ++] function sayHello() { - console.log("Hello, World!"); // [!code --] + console.log("Bonjour, monde !"); // [!code --] console.log(greeting); // [!code ++] } sayHello(); diff --git a/fr/components/code-groups.mdx b/fr/components/code-groups.mdx index 70c113b0d..c9998b782 100644 --- a/fr/components/code-groups.mdx +++ b/fr/components/code-groups.mdx @@ -7,46 +7,48 @@ icon: "group" Utilisez le composant `CodeGroup` pour afficher plusieurs blocs de code dans une interface à onglets, afin de permettre aux utilisateurs de comparer des implémentations dans différents langages de programmation ou d’examiner des approches alternatives pour une même tâche. - ```javascript helloWorld.js - console.log("Hello World"); - ``` - ```python hello_world.py - print('Hello World!') - ``` +```javascript helloWorld.js +console.log("Hello World"); +``` + +```python hello_world.py +print('Hello World!') +``` + +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` - ```java HelloWorld.java - class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } - } - ``` -Les groupes de code héritent du style global défini dans votre fichier `docs.json`. Personnalisez votre thème avec `styling.codeblocks`. Consultez [Paramètres](/fr/settings#styling) pour les options de configuration. +
- ## Création de groupes de code + ## Créer des groupes de code
-Pour créer un groupe de code, enveloppez plusieurs code blocks avec des balises ``. Chaque code block doit inclure un Titre, qui devient le label de l’Onglet. +Pour créer un groupe de code, entourez plusieurs blocs de code avec des balises ``. Chaque bloc de code doit inclure un titre, qui deviendra le libellé de l’onglet. ````mdx ```javascript helloWorld.js -console.log("Bonjour le monde"); +console.log("Bonjour, monde !"); ``` ```python hello_world.py -print('Bonjour le monde !') +print('Bonjour, monde !') ``` ```java HelloWorld.java class HelloWorld { public static void main(String[] args) { - System.out.println("Bonjour le monde !"); + System.out.println("Bonjour, monde !"); } } ``` @@ -54,11 +56,12 @@ class HelloWorld { ```` +
- ## Menu déroulant de langue + ## Liste déroulante de langue
-Vous pouvez remplacer les onglets d’un groupe de code par un menu déroulant pour changer de langue à l’aide de la prop `dropdown`. +Vous pouvez remplacer les onglets d’un groupe de code par un menu déroulant pour basculer entre les langues en utilisant la prop `dropdown`. ```javascript helloWorld.js @@ -78,7 +81,7 @@ Vous pouvez remplacer les onglets d’un groupe de code par un menu déroulant p ``` -````mdx highlight=1 +````mdx surlignage=1 ```javascript helloWorld.js diff --git a/fr/settings.mdx b/fr/settings.mdx index f577e367d..3fd04f0a6 100644 --- a/fr/settings.mdx +++ b/fr/settings.mdx @@ -49,7 +49,7 @@ Cette section présente la référence complète du fichier `docs.json`. L’un des suivants : `mint`, `maple`, `palm`, `willow`, `linden`, `almond`, `aspen`. - Voir [Thèmes](fr/themes) pour plus d’informations. + Voir [Themes](fr/themes) pour plus d’informations. @@ -59,15 +59,15 @@ Cette section présente la référence complète du fichier `docs.json`. Les couleurs utilisées dans votre documentation. Leur application varie selon les thèmes. Si vous ne fournissez qu’une couleur principale, elle sera utilisée pour tous les éléments colorés. - + - La couleur principale de votre documentation. Généralement utilisée pour la mise en avant en mode clair, avec quelques variations selon le thème. + La couleur principale de votre documentation. Généralement utilisée pour l’accentuation en mode clair, avec quelques variations selon le thème. Doit être un code hexadécimal commençant par `#`. - La couleur utilisée pour la mise en avant en mode sombre. + La couleur utilisée pour l’accentuation en mode sombre. Doit être un code hexadécimal commençant par `#`. @@ -97,13 +97,13 @@ Cette section présente la référence complète du fichier `docs.json`. - L’URL vers laquelle rediriger lors d’un clic sur le logo. Si elle n’est pas fournie, le logo renverra vers votre page d’accueil. Exemple : `https://mintlify.com` + L’URL vers laquelle rediriger lors d’un clic sur le logo. Si non renseigné, le logo pointera vers votre page d’accueil. Exemple : `https://mintlify.com` - Chemin vers votre fichier favicon, y compris l’extension. Redimensionné automatiquement aux tailles de favicon appropriées. + Chemin vers votre fichier favicon, incluant l’extension. Redimensionné automatiquement aux tailles appropriées. Peut être un fichier unique ou des fichiers distincts pour les modes clair et sombre. Exemple : `/favicon.png` @@ -118,15 +118,15 @@ Cette section présente la référence complète du fichier `docs.json`. - Personnalisation des miniatures pour les réseaux sociaux et les aperçus de page. + Personnalisation des vignettes pour les réseaux sociaux et les aperçus de page. - + - Le thème visuel de vos miniatures. S’il n’est pas spécifié, les miniatures utilisent la palette de couleurs de votre site définie par le champ `colors`. + Le thème visuel de vos vignettes. S’il n’est pas spécifié, les vignettes utilisent le jeu de couleurs de votre site défini par le champ `colors`. - Image d’arrière-plan pour vos miniatures. Peut être un chemin relatif ou une URL absolue. + Image d’arrière-plan pour vos vignettes. Peut être un chemin relatif ou une URL absolue. @@ -136,58 +136,11 @@ Cette section présente la référence complète du fichier `docs.json`. - Le style de l’eyebrow de la page. Choisissez `section` pour afficher le nom de la section ou `breadcrumbs` pour afficher le chemin de navigation complet. La valeur par défaut est `section`. + Le style de l’eyebrow de la page. Choisissez `section` pour afficher le nom de la section ou `breadcrumbs` pour afficher le chemin de navigation complet. Valeur par défaut : `section`. - - Configuration du thème des code blocks. Par défaut : `"system"`. - - **Options simples :** - - * `"system"` : Correspond au mode actuel du site (clair ou sombre) - * `"dark"` : Utilise toujours le mode sombre - - **Configuration de thème personnalisée :** - Utilisez un objet pour spécifier les [thèmes Shiki](https://shiki.style/themes). Choisissez un seul thème pour les deux modes ou des thèmes distincts pour les modes clair et sombre. - - - - Un nom de thème Shiki unique à utiliser pour les modes clair et sombre. - - ```json - "styling": { - "codeblocks": { - "theme": "dracula" - } - } - ``` - - - - Thèmes distincts pour les modes clair et sombre. - - - - Un nom de thème Shiki pour le mode clair. - - - - Un nom de thème Shiki pour le mode sombre. - - - ```json - "styling": { - "codeblocks": { - "themes": { - "light": "github-light", - "dark": "github-dark" - } - } - } - ``` - - - + + Le thème des blocs de code. Choisissez `system` pour correspondre au thème du site ou `dark` pour des blocs de code toujours sombres. Valeur par défaut : `system`. @@ -195,12 +148,12 @@ Cette section présente la référence complète du fichier `docs.json`. Paramètres de la bibliothèque d’icônes. - + - Bibliothèque d’icônes à utiliser dans l’ensemble de votre documentation. Par défaut : `fontawesome`. + Bibliothèque d’icônes utilisée dans l’ensemble de votre documentation. Par défaut : `fontawesome`. - Vous pouvez spécifier une URL vers une icône hébergée en externe, un chemin vers un fichier d’icône dans votre projet, ou du code SVG compatible JSX pour n’importe quelle icône individuelle, quel que soit le paramètre de bibliothèque. + Vous pouvez indiquer une URL vers une icône hébergée en externe, un chemin de fichier d’icône dans votre projet, ou du code SVG (Scalable Vector Graphics) compatible JSX pour n’importe quelle icône, quel que soit le paramétrage de la bibliothèque. @@ -211,15 +164,15 @@ Cette section présente la référence complète du fichier `docs.json`. - Famille de polices, par exemple « Open Sans ». + Famille de polices, par exemple « Open Sans ». - Graisse/épaisseur, par exemple 400 ou 700. Les polices variables permettent des valeurs précises comme 550. + Graisse (épaisseur) de la police, par exemple 400 ou 700. Les polices variables acceptent des valeurs précises comme 550. - URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Les [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous indiquez un nom de `family` Google Font, donc aucune URL de source n’est nécessaire. + URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous renseignez un nom de `family` Google Font, aucune URL de source n’est donc nécessaire. @@ -227,19 +180,19 @@ Cette section présente la référence complète du fichier `docs.json`. - Remplacez les paramètres de police spécifiquement pour les titres. + Remplace les paramètres de police spécifiquement pour les titres. - Famille de polices, par exemple « Open Sans », « Playfair Display ». + Famille de polices, par exemple « Open Sans », « Playfair Display ». - Graisse/épaisseur, par exemple 400 ou 700. Les polices variables permettent des valeurs précises comme 550. + Graisse (épaisseur) de la police, par exemple 400, 700. Les polices variables acceptent des valeurs précises comme 550. - URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Les [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous indiquez un nom de `family` Google Font, donc aucune URL de source n’est nécessaire. + URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous renseignez un nom de `family` Google Font, aucune URL de source n’est donc nécessaire. @@ -249,19 +202,19 @@ Cette section présente la référence complète du fichier `docs.json`. - Remplacez les paramètres de police spécifiquement pour le corps de texte. + Remplace les paramètres de police spécifiquement pour le texte courant. - + - Famille de polices, par exemple « Open Sans », « Playfair Display ». + Famille de polices, par exemple « Open Sans », « Playfair Display ». - Graisse/épaisseur, par exemple 400 ou 700. Les polices variables permettent des valeurs précises comme 550. + Graisse (épaisseur) de la police, par exemple 400, 700. Les polices variables acceptent des valeurs précises comme 550. - URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. Les [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous indiquez un nom de `family` Google Font, donc aucune URL de source n’est nécessaire. + URL de la source de votre police, par exemple https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) sont chargées automatiquement lorsque vous renseignez un nom de `family` Google Font, aucune URL de source n’est donc nécessaire. @@ -273,15 +226,15 @@ Cette section présente la référence complète du fichier `docs.json`. - Paramètres de l’interrupteur de mode clair/sombre. + Paramètres de la bascule de mode clair/sombre. - Mode de thème par défaut. Choisissez `system` pour s’aligner sur les réglages du système d’exploitation des utilisateurs, ou `light`/`dark` pour forcer un mode spécifique. Valeur par défaut : `system`. + Mode de thème par défaut. Choisissez `system` pour suivre le réglage du système d’exploitation de l’utilisateur, ou `light`/`dark` pour imposer un mode spécifique. Par défaut : `system`. - Indique s’il faut masquer l’interrupteur clair/sombre. Valeur par défaut : `true`. + Indique s’il faut masquer la bascule clair/sombre. Par défaut : `true`. diff --git a/zh/code.mdx b/zh/code.mdx index 41680c71f..74ad6c62e 100644 --- a/zh/code.mdx +++ b/zh/code.mdx @@ -8,27 +8,27 @@ icon: "code" ## 添加代码示例 -你可以添加行内代码片段或代码块。代码块支持用于语法高亮、title、行高亮、icon 等的元选项，以及更多功能。 +你可以添加行内代码片段或代码块。代码块支持用于语法高亮、标题、行高亮、图标等的元选项。
### 行内代码
-要将 `word` 或 `phrase` 表示为代码，请用反引号（`）包裹。 +要将某个`单词`或`短语`标记为代码，请用反引号（`）将其包裹。 ```mdx -要将`单词`或`短语`标记为代码，请用反引号（`）将其包围。 +要将某个 `单词` 或 `短语` 标记为代码，请用反引号（`）将其包裹起来。 ```
### 代码块
-使用[围栏代码块](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)，即用三个反引号将代码包裹起来。代码块支持复制；如果启用了 AI 助手，用户还可以让 AI 解释代码。 +使用[围栏代码块](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)，将代码用三个反引号包裹起来。代码块可直接复制；如果启用了文档助手，用户还可以让 AI 解释代码。 -为实现语法高亮并启用元选项，请指定编程语言。在语言标识后添加任意元选项，例如 title 或 icon。 +为语法高亮和启用元选项指定编程语言。在语言名后添加任意元选项，例如标题或图标。 -```java HelloWorld.java lines icon="java" +```java HelloWorld.java 行数图标 icon="java" class HelloWorld { public static void main(String[] args) { System.out.println("你好，世界！"); @@ -50,7 +50,7 @@ class HelloWorld { ## 代码块选项 -你可以为代码块添加元选项，以自定义其显示效果。 +你可以为代码块添加元选项，以自定义其外观。 在添加任何其他元选项之前，必须先为代码块指定编程语言。 @@ -60,18 +60,16 @@ class HelloWorld { ### 选项语法 -* **字符串与布尔选项**：可用 `""`、`''`，或不加引号包裹。 -* **表达式选项**：可用 `{}`、`""`，或 `''` 包裹。 +* **字符串和布尔选项**：使用 `""`、`''`，或不加引号包裹。 +* **表达式选项**：使用 `{}`、`""`，或 `''` 包裹。
### 语法高亮
-在代码块的起始反引号后添加编程语言即可启用语法高亮。 - -我们使用 [Shiki](https://shiki.style/) 提供语法高亮，支持其所有可用语言。完整语言列表见 Shiki 文档中的[语言](https://shiki.style/languages)。 +在代码块的起始反引号后指定编程语言即可启用语法高亮。 -在 `docs.json` 中通过 `styling.codeblocks` 全局自定义代码块主题。可以设置如 `system` 或 `dark` 等简单主题，或为浅色与深色模式配置自定义的 [Shiki 主题](https://shiki.style/themes)。详见 [Settings](/zh/settings#styling) 获取详细的配置选项。 +我们使用 [Shiki](https://shiki.style/) 进行语法高亮，并支持所有可用语言。请在 Shiki 文档中查看完整的[语言](https://shiki.style/languages)列表。 ```java class HelloWorld { @@ -95,9 +93,9 @@ class HelloWorld { ### 标题 -为代码示例添加标题。使用 `title="Your title"`，或在单独一行提供一个字符串。 +为代码示例添加标题。可使用 `title="Your title"`，或在单独一行放置字符串。 -```javascript Code Block Example +```javascript 代码块示例 const hello = "world"; ``` @@ -111,7 +109,7 @@ const hello = "world"; ### 图标 -使用 `icon` 属性为代码块添加图标。参见[图标](/zh/components/icons)以查看所有可用选项。 +使用 `icon` 属性为代码块添加图标。查看 [Icons](/zh/components/icons) 以了解所有可用选项。 ```javascript icon="square-js" const hello = "world"; @@ -127,9 +125,9 @@ const hello = "world"; ### 行高亮 -在代码块中使用 `highlight` 并指定要高亮的行号或范围，以突出显示特定行。 +在代码块中使用 `highlight` 并指定行号或范围，以高亮特定行。 -```javascript Line Highlighting Example highlight= {1-2,5} +```javascript 行高亮示例 highlight= {1-2,5} const greeting = "你好，世界！"; function sayHello() { console.log(greeting); @@ -139,7 +137,7 @@ sayHello(); ````mdx ```javascript 行高亮示例 highlight={1-2,5} -const greeting = "Hello, World!"; +const greeting = "你好，世界！"; function sayHello() { console.log(greeting); } @@ -147,13 +145,13 @@ sayHello(); ``` ```` -
- ### 行高亮 +
+ ### 行聚焦
-在代码块中可使用带有行号或范围的 `focus` 来高亮指定行。 +在代码块中使用 `focus` 并指定行号或范围，以高亮显示特定行。 -```javascript Line Focus Example focus= {2,4-5} +```javascript 行聚焦示例 focus= {2,4-5} const greeting = "你好，世界！"; function sayHello() { console.log(greeting); @@ -162,8 +160,8 @@ sayHello(); ``` ````mdx -```javascript 行聚焦示例 focus={2,4-5} -const greeting = "Hello, World!"; +```javascript 行高亮示例 focus={2,4-5} +const greeting = "你好，世界！"; function sayHello() { console.log(greeting); } @@ -177,7 +175,7 @@ sayHello(); 使用 `lines` 在代码块左侧显示行号。 -```javascript Show Line Numbers Example lines +```javascript 显示行号 示例行 const greeting = "你好，世界！"; function sayHello() { console.log(greeting); @@ -199,9 +197,9 @@ sayHello(); ### 可展开
-使用 `expandable` 让用户展开或折叠较长的代码块。 +使用 `expandable` 让用户展开或收起长代码块。 -```python Expandable Example expandable +```python 可展开示例 expandable from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -217,11 +215,11 @@ class Book: class Library: def __init__(self): self.books: Dict[str, Book] = {} - self.checkouts: Dict[str, List[str]] = {} # 借阅者 -> ISBN列表 + self.checkouts: Dict[str, List[str]] = {} # 读者 -> ISBN 列表 def add_book(self, book: Book) -> None: if book.isbn in self.books: - raise ValueError(f"ISBN为 {book.isbn} 的图书已存在") + raise ValueError(f"已存在 ISBN 为 {book.isbn} 的书籍") self.books[book.isbn] = book def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None: @@ -230,13 +228,13 @@ class Library: book = self.books.get(isbn) if not book: - raise ValueError("未找到图书") + raise ValueError("未找到该书") if book.checked_out: - raise ValueError("图书已被借出") + raise ValueError("该书已被借出") if len(self.checkouts[patron]) >= 3: - raise ValueError("借阅者已达到借阅限制") + raise ValueError("该读者已达到借阅上限") book.checked_out = True book.due_date = datetime.now() + timedelta(days=days) @@ -245,7 +243,7 @@ class Library: def return_book(self, isbn: str) -> float: book = self.books.get(isbn) if not book or not book.checked_out: - raise ValueError("未找到图书或图书未被借出") + raise ValueError("未找到该书或该书未被借出") late_fee = 0.0 if datetime.now() > book.due_date: @@ -255,7 +253,7 @@ class Library: book.checked_out = False book.due_date = None - # 从借阅者的借阅记录中移除 + # 从读者的借阅列表中移除 for patron, books in self.checkouts.items(): if isbn in books: books.remove(isbn) @@ -273,7 +271,7 @@ class Library: def main(): library = Library() - # 添加一些图书 + # 添加一些书 books = [ Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"), Book("1984", "George Orwell", "978-0-452-28423-4"), @@ -282,10 +280,10 @@ def main(): for book in books: library.add_book(book) - # 借阅和归还示例 + # 借阅与归还示例 library.checkout_book("978-0-261-10295-4", "patron123") late_fee = library.return_book("978-0-261-10295-4") - print(f"滞纳金: ${late_fee:.2f}") + print(f"逾期费用：${late_fee:.2f}") if __name__ == "__main__": main() @@ -297,7 +295,7 @@ from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass -# ... +# … if __name__ == "__main__": main() @@ -305,13 +303,13 @@ if __name__ == "__main__": ````
- ### 自动换行 + ### Wrap
-使用 `wrap` 为长行启用自动换行。这样可以防止横向滚动，并使长行更易读。 +使用 `wrap` 为长文本启用自动换行。这样可避免水平滚动，并使长行更易读。 -```javascript Wrap Example wrap -const greeting = "你好，世界！我是一行很长的文本，会换行到下一行。"; +```javascript 换行 示例 wrap +const greeting = "你好，世界！我是一段很长的文本，会在末尾自动换到下一行。"; function sayHello() { console.log(greeting); } @@ -319,8 +317,8 @@ sayHello(); ``` ````mdx -```javascript 换行示例 wrap -const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; +```javascript 自动换行示例 wrap +const greeting = "Hello, World! 我是一段很长的文本，会自动换到下一行。"; function sayHello() { console.log(greeting); } @@ -329,24 +327,24 @@ sayHello(); ````
- ### Diff + ### 差异对比
-在代码块中可视化展示新增或删除的行。新增行以绿色高亮，删除行以红色高亮。 +在代码块中以可视化方式展示新增或删除的行。新增行以绿色高亮，删除行以红色高亮。 -要创建差异视图，请在代码块的行尾添加以下特殊注释： +要创建差异对比，请在代码块的行尾添加以下特殊注释： -* `// [!code ++]`：将该行标记为新增（绿色高亮）。 -* `// [!code --]`：将该行标记为删除（红色高亮）。 +* `// [!code ++]`: 将该行标记为新增（绿色高亮）。 +* `// [!code --]`: 将该行标记为删除（红色高亮）。 -对多行连续内容，可在冒号后指定行数： +对于多行连续的情况，可在冒号后指定行数： -* `// [!code ++:3]`：将当前行及其后两行标记为新增。 -* `// [!code --:5]`：将当前行及其后四行标记为删除。 +* `// [!code ++:3]`: 将当前行及其后两行标记为新增。 +* `// [!code --:5]`: 将当前行及其后四行标记为删除。 -注释语法必须与所使用的编程语言一致（例如，JavaScript 使用 `//`，Python 使用 `#`）。 +注释语法必须与所用编程语言匹配（例如，JavaScript 使用 `//`，Python 使用 `#`）。 -```js Diff Example icon="code" lines +```js 差异示例 icon="code" lines const greeting = "你好，世界！"; // [!code ++] function sayHello() { console.log("你好，世界！"); // [!code --] @@ -357,9 +355,9 @@ sayHello(); ````text ```js Diff 示例 icon="code" lines -const greeting = "Hello, World!"; // [!code ++] +const greeting = "你好，世界！"; // [!code ++] function sayHello() { - console.log("Hello, World!"); // [!code --] + console.log("你好，世界！"); // [!code --] console.log(greeting); // [!code ++] } sayHello(); diff --git a/zh/components/code-groups.mdx b/zh/components/code-groups.mdx index 144f08d24..97bb13328 100644 --- a/zh/components/code-groups.mdx +++ b/zh/components/code-groups.mdx @@ -1,46 +1,48 @@ --- -title: "代码分组" -description: "在一个组件中展示多个代码示例" +title: "代码组" +description: "在单个组件中展示多个代码示例" icon: "group" --- -使用 `CodeGroup` 组件在标签式界面中展示多个代码块，便于用户对比不同编程语言的实现，或查看完成同一任务的替代方案。 +使用 `CodeGroup` 组件在带有标签页的界面中展示多个代码块，方便用户对比不同编程语言的实现，或查看同一任务的替代实现。 - ```javascript helloWorld.js - console.log("Hello World"); - ``` - ```python hello_world.py - print('Hello World!') - ``` +```javascript helloWorld.js +console.log("Hello World"); +``` + +```python hello_world.py +print('Hello World!') +``` + +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` - ```java HelloWorld.java - class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } - } - ``` -代码分组会继承 `docs.json` 中的全局样式。可通过 `styling.codeblocks` 自定义主题。配置项参见 [Settings](/zh/settings#styling)。 +
## 创建代码组
-要创建代码组，请使用 `` 标签包裹多个代码块。每个代码块必须包含一个 title，其值将作为标签页的标签。 +要创建代码组，请用 `` 标签包裹多个代码块。每个代码块必须包含一个标题，该标题将作为选项卡的标签显示。 ````mdx ```javascript helloWorld.js -console.log("你好世界"); +console.log("你好，世界"); ``` ```python hello_world.py -print('你好世界!') +print('你好，世界！') ``` ```java HelloWorld.java @@ -54,11 +56,12 @@ class HelloWorld { ```` +
## 语言下拉菜单
-你可以通过使用 `dropdown` 属性，将 CodeGroup 中的选项卡替换为下拉菜单，以在不同语言之间切换。 +你可以使用 `dropdown` 属性将代码组中的标签页替换为下拉菜单，以在不同语言间切换。 ```javascript helloWorld.js @@ -82,11 +85,11 @@ class HelloWorld { ```javascript helloWorld.js -console.log("你好世界"); +console.log("你好，世界"); ``` ```python hello_world.py -print('你好世界!') +print('你好，世界！') ``` ```java HelloWorld.java diff --git a/zh/settings.mdx b/zh/settings.mdx index 4f7f8f3c5..0c6846577 100644 --- a/zh/settings.mdx +++ b/zh/settings.mdx @@ -47,35 +47,35 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; 站点的布局主题。 - 可选值：`mint`、`maple`、`palm`、`willow`、`linden`、`almond`、`aspen`。 + 以下之一：`mint`、`maple`、`palm`、`willow`、`linden`、`almond`、`aspen`。 - 参见[Themes](zh/themes)了解更多信息。 + 更多信息请参阅 [Themes](zh/themes)。 - 项目、组织或产品的名称。 + 您的项目、组织或产品名称。 - 文档中使用的颜色。不同主题对颜色的应用有所差异。若只提供主色，将用于所有相关颜色元素。 + 文档中使用的配色。不同主题的应用方式不同。若仅提供主色，将用于所有相关颜色元素。 - 文档的主色。通常在浅色模式下用于强调，具体效果因主题而异。 + 文档的主色。通常在浅色模式下用于强调，具体因主题而异。 - 必须为以 `#` 开头的十六进制颜色值。 + 必须是以 `#` 开头的十六进制色值。 - 在深色模式下用于强调的颜色。 + 深色模式下用于强调的颜色。 - 必须为以 `#` 开头的十六进制颜色值。 + 必须是以 `#` 开头的十六进制色值。 - 在浅色和深色模式下用于按钮与悬停状态的颜色，具体效果因主题而异。 + 在浅色与深色模式下用于按钮和悬停状态的颜色，具体因主题而异。 - 必须为以 `#` 开头的十六进制颜色值。 + 必须是以 `#` 开头的十六进制色值。 @@ -85,19 +85,19 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 适用于浅色与深色模式的 logo。 + 适用于浅色和深色模式的徽标。 - 指向浅色模式 logo 文件的路径，需包含文件扩展名。示例：`/logo.png` + 指向浅色模式徽标文件的路径。需包含文件扩展名。示例：`/logo.png` - 指向深色模式 logo 文件的路径，需包含文件扩展名。示例：`/logo-dark.png` + 指向深色模式徽标文件的路径。需包含文件扩展名。示例：`/logo-dark.png` - 点击 logo 时跳转的 URL。若未提供，logo 将链接到首页。示例：`https://mintlify.com` + 点击徽标时跳转的 URL。若未提供，徽标将链接到您的首页。示例：`https://mintlify.com` @@ -108,11 +108,11 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 指向浅色模式 favicon 文件的路径，需包含文件扩展名。示例：`/favicon.png` + 指向浅色模式 favicon 文件的路径。需包含文件扩展名。示例：`/favicon.png` - 指向深色模式 favicon 文件的路径，需包含文件扩展名。示例：`/favicon-dark.png` + 指向深色模式 favicon 文件的路径。需包含文件扩展名。示例：`/favicon-dark.png` @@ -126,7 +126,7 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 缩略图背景图像。可为相对路径或绝对 URL。 + 缩略图的背景图像。可为相对路径或绝对 URL。 @@ -136,58 +136,11 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 页面“眉头”样式。选择 `section` 显示分区名称，或选择 `breadcrumbs` 显示完整导航路径。默认为 `section`。 + 页面眉的样式。选择 `section` 显示分区名称，或选择 `breadcrumbs` 显示完整导航路径。默认为 `section`。 - - 代码块主题配置。默认为 `"system"`。 - - **简易选项：** - - * `"system"`：匹配站点当前模式（light 或 dark） - * `"dark"`：始终使用深色模式 - - **自定义主题配置：** - 使用对象指定 [Shiki 主题](https://shiki.style/themes)。可为两种模式使用同一主题，或分别为 light 与 dark 指定不同主题。 - - - - 同时用于 light 与 dark 模式的单个 Shiki 主题名称。 - - ```json - "styling": { - "codeblocks": { - "theme": "dracula" - } - } - ``` - - - - 分别为 light 与 dark 模式设置不同主题。 - - - - light 模式的 Shiki 主题名称。 - - - - dark 模式的 Shiki 主题名称。 - - - ```json - "styling": { - "codeblocks": { - "themes": { - "light": "github-light", - "dark": "github-dark" - } - } - } - ``` - - - + + 代码块的主题。选择 `system` 以匹配站点主题，或选择 `dark` 始终使用深色代码块。默认为 `system`。 @@ -197,10 +150,10 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 文档全站使用的图标库。默认为 `fontawesome`。 + 在整站文档中使用的图标库。默认为 `fontawesome`。 - 无论库设置为何，您都可以为任意单个图标指定外部托管图标的 URL、项目内图标文件的路径，或 JSX 兼容的 SVG 代码。 + 无论库设置如何，你都可以为任意单个图标指定外部托管图标的 URL、项目中图标文件的路径，或兼容 JSX 的 SVG 代码。 @@ -215,11 +168,11 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 字重，例如 400 或 700。可变字体支持精确字重，例如 550。 + 字重，例如 400 或 700。可变字体支持更精确的字重，例如 550。 - 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供 source URL。 + 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。 当你指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供来源 URL。 @@ -227,19 +180,19 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 针对标题的字体设置覆盖。 + 专用于标题的字体覆盖设置。 - 字体系列，例如 “Open Sans”、“Playfair Display”。 + 字体系列，例如 “Open Sans”“Playfair Display”。 - 字重，例如 400、700。可变字体支持精确字重，例如 550。 + 字重，例如 400、700。可变字体支持更精确的字重，例如 550。 - 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供 source URL。 + 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。 当你指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供来源 URL。 @@ -249,19 +202,19 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 针对正文的字体设置覆盖。 + 专用于正文的字体覆盖设置。 - 字体系列，例如 “Open Sans”、“Playfair Display”。 + 字体系列，例如 “Open Sans”“Playfair Display”。 - 字重，例如 400、700。可变字体支持精确字重，例如 550。 + 字重，例如 400、700。可变字体支持更精确的字重，例如 550。 - 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供 source URL。 + 字体来源的 URL，例如 https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2。 当你指定 Google 字体的 `family` 名称时，[Google Fonts](https://fonts.google.com) 会自动加载，因此无需提供来源 URL。 @@ -273,15 +226,15 @@ import IconsOptional from "/snippets/zh/icons-optional.mdx"; - 明/暗模式切换设置。 + 明暗模式切换设置。 - 默认主题模式。选择 `system` 以匹配用户的操作系统设置，或选择 `light` 或 `dark` 以强制使用特定模式。默认值为 `system`。 + 默认主题模式。选择 `system` 以匹配用户的操作系统设置，或选择 `light` 或 `dark` 以强制使用特定模式。默认为 `system`。 - 是否隐藏明/暗模式切换。默认值为 `true`。 + 是否隐藏明暗模式切换。默认为 `true`。