diff --git a/es/code.mdx b/es/code.mdx
index 8334d04b4..bc11a5ba3 100644
--- a/es/code.mdx
+++ b/es/code.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Código"
-description: "Mostrar código en línea y bloques de código"
+description: "Muestra código en línea y bloques de código"
 icon: "code"
 ---
 
@@ -8,30 +8,30 @@ icon: "code"
   ## Agregar ejemplos de código
 </div>
 
-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.
+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.
 
 <div id="inline-code">
   ### Código en línea
 </div>
 
-Para indicar una `palabra` o `frase` como código, colócala entre acentos graves (`).
+Para indicar una `palabra` o `frase` como código, enciérrala entre comillas invertidas (`).
 
 ```mdx
-Para indicar una `palabra` o `frase` como código, enciérrala entre acentos graves (`).
+Para marcar una `palabra` o `frase` como código, enciérrala entre comillas invertidas (`).
 ```
 
 <div id="code-blocks">
   ### Bloques de código
 </div>
 
-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.
+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.
 
-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.
+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.
 
 ```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,41 +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!");
     }
 }
 ```
 ````
 
 <div id="code-block-options">
-  ## Opciones de bloques de código
+  ## Opciones de bloque de código
 </div>
 
-Puedes añadir opciones meta a tus bloques de código para personalizar su apariencia.
+Puedes añadir opciones de metadatos a tus bloques de código para personalizar su apariencia.
 
 <Note>
-  Debes especificar un lenguaje de programación para un bloque de código antes de añadir cualquier otra opción meta.
+  Debes especificar un lenguaje de programación para un bloque de código antes de añadir cualquier otra opción de metadatos.
 </Note>
 
 <div id="option-syntax">
-  ### Sintaxis de opciones
+  ### Sintaxis de las opciones
 </div>
 
-* **Opciones de tipo string y booleanas**: Envuelve con `""`, `''` o sin comillas.
-* **Opciones de expresión**: Envuelve con `{}`, `""` o `''`.
+* **Opciones de cadena y booleanas**: Envuélvelas con `""`, `''` o sin comillas.
+* **Opciones de expresión**: Envuélvelas con `{}`, `""` o `''`.
 
 <div id="syntax-highlighting">
   ### Resaltado de sintaxis
 </div>
 
-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.
+Activa el resaltado de sintaxis indicando el lenguaje de programación después de las comillas invertidas iniciales 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.
 
 ```java
 class HelloWorld {
     public static void main(String[] args) {
-        System.out.println("¡Hola, mundo!");
+        System.out.println("¡Hola, Mundo!");
     }
 }
 ```
@@ -83,24 +83,54 @@ class HelloWorld {
 ```java
 class HelloWorld {
     public static void main(String[] args) {
-        System.out.println("¡Hola, mundo!");
+        System.out.println("¡Hola, Mundo!");
     }
 }
 ```
 ````
 
+<div id="twoslash">
+  ### Twoslash
+</div>
+
+En los bloques de código de JavaScript y TypeScript, usa `twoslash` para habilitar información de tipos interactiva. Los usuarios pueden pasar el cursor sobre variables, funciones y parámetros para ver tipos y errores, como en un IDE.
+
+```ts title="Twoslash Example" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} el ${type} ya está adoptado!`;
+}
+
+// Pasa el cursor para ver los tipos inferidos
+const message = adoptPet("Mintie", "cat");
+```
+
+````mdx
+```ts title="Ejemplo de Twoslash" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} the ${type} is now adopted! 🎉`;
+}
+
+// Pasa el cursor para ver los tipos inferidos
+const message = adoptPet("Mintie", "cat");
+```
+````
+
 <div id="title">
   ### Título
 </div>
 
-Añade un título para etiquetar tu ejemplo de código. Usa `title="Your title"` o una cadena en una sola línea.
+Añade un título para identificar tu ejemplo de código. Usa `title="Your title"` o una cadena en una sola línea.
 
-```javascript Ejemplo de bloque de código
+```javascript Code Block Example
 const hello = "mundo";
 ```
 
 ````mdx
-```javascript Ejemplo de bloque de código
+```javascript Ejemplo de Bloque de Código
 const hello = "world";
 ```
 ````
@@ -112,7 +142,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 = "world";
+const hello = "mundo";
 ```
 
 ````mdx
@@ -125,10 +155,10 @@ const hello = "world";
   ### Resaltado de líneas
 </div>
 
-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.
+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.
 
-```javascript Ejemplo de resalte de líneas highlight= {1-2,5}
-const greeting = "¡Hola, mundo!";
+```javascript Line Highlighting Example highlight= {1-2,5}
+const greeting = "¡Hola, Mundo!";
 function sayHello() {
   console.log(greeting);
 }
@@ -136,12 +166,12 @@ sayHello();
 ```
 
 ````mdx
-```javascript Ejemplo de resaltado de líneas highlight={1-2,5}
-const saludo = "¡Hola, mundo!";
-function decirHola() {
-  console.log(saludo);
+```javascript Ejemplo de Resaltado de Líneas highlight={1-2,5}
+const greeting = "Hello, World!";
+function sayHello() {
+  console.log(greeting);
 }
-decirHola();
+sayHello();
 ```
 ````
 
@@ -149,20 +179,19 @@ decirHola();
   ### Enfoque de líneas
 </div>
 
-Resalta líneas específicas en tus bloques de código usando `focus` con números de línea o rangos.
----MDX&#95;CONTENTEND---
+Enfoca líneas específicas en tus bloques de código usando `focus` con números de línea o rangos.
 
-```javascript Ejemplo de enfoque de línea focus= {2,4-5}
-const greeting = "¡Hola, mundo!";
-function decirHola() {
+```javascript Line Focus Example focus= {2,4-5}
+const greeting = "¡Hola, Mundo!";
+function sayHello() {
   console.log(greeting);
 }
-decirHola();
+sayHello();
 ```
 
 ````mdx
-```javascript Ejemplo de enfoque de líneas focus={2,4-5}
-const greeting = "¡Hola, mundo!";
+```javascript Ejemplo de Enfoque de Línea focus={2,4-5}
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -174,19 +203,19 @@ sayHello();
   ### Mostrar números de línea
 </div>
 
-Muestra los números de línea en el lado izquierdo de tu bloque de código usando `lines`.
+Muestra los números de línea en el lado izquierdo de tu bloque de código con `lines`.
 
-```javascript Mostrar números de línea Ejemplo de líneas
-const greeting = "¡Hola, mundo!";
-function decirHola() {
+```javascript Show Line Numbers Example lines
+const greeting = "¡Hola, Mundo!";
+function sayHello() {
   console.log(greeting);
 }
-decirHola();
+sayHello();
 ```
 
 ````mdx
-```javascript Mostrar números de línea Ejemplo líneas
-const greeting = "¡Hola, mundo!";
+```javascript Mostrar números de línea Ejemplo
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -198,9 +227,9 @@ sayHello();
   ### Expandible
 </div>
 
-Permite que los usuarios expandan y contraigan bloques de código largos usando `expandable`.
+Permite que los usuarios expandan y contraigan bloques de código largos con `expandable`.
 
-```python Ejemplo expandible expandable
+```python Expandable Example expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -220,7 +249,7 @@ class Library:
 
     def add_book(self, book: Book) -> None:
         if book.isbn in self.books:
-            raise ValueError(f"Ya existe un libro con el ISBN {book.isbn}")
+            raise ValueError(f"El libro con ISBN {book.isbn} ya existe")
         self.books[book.isbn] = book
 
     def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
@@ -229,13 +258,13 @@ class Library:
 
         book = self.books.get(isbn)
         if not book:
-            raise ValueError("No se encontró el libro")
+            raise ValueError("Libro no encontrado")
 
         if book.checked_out:
             raise ValueError("El libro ya está prestado")
 
         if len(self.checkouts[patron]) >= 3:
-            raise ValueError("El usuario alcanzó el límite de préstamos")
+            raise ValueError("El usuario ha alcanzado el límite de préstamos")
 
         book.checked_out = True
         book.due_date = datetime.now() + timedelta(days=days)
@@ -244,7 +273,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("No se encontró el libro o no está prestado")
+            raise ValueError("Libro no encontrado o no está prestado")
 
         late_fee = 0.0
         if datetime.now() > book.due_date:
@@ -254,7 +283,7 @@ class Library:
         book.checked_out = False
         book.due_date = None
 
-        # Quitar de los préstamos del usuario
+        # Eliminar de los préstamos del usuario
         for patron, books in self.checkouts.items():
             if isbn in books:
                 books.remove(isbn)
@@ -291,7 +320,7 @@ if __name__ == "__main__":
 ```
 
 ````mdx
-```python Ejemplo desplegable expandable
+```python Ejemplo Expandible expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -307,10 +336,10 @@ if __name__ == "__main__":
   ### Ajuste
 </div>
 
-Habilita el ajuste de texto para líneas largas con `wrap`. Esto evita el desplazamiento horizontal y facilita la lectura de líneas extensas.
+Activa el ajuste de texto para líneas largas con `wrap`. Esto evita el desplazamiento horizontal y facilita la lectura de líneas extensas.
 
-```javascript Ejemplo de ajuste wrap
-const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea.";
+```javascript Wrap Example wrap
+const greeting = "¡Hola, Mundo! Soy una línea larga de texto que se ajustará a la siguiente línea.";
 function sayHello() {
   console.log(greeting);
 }
@@ -318,8 +347,8 @@ sayHello();
 ```
 
 ````mdx
-```javascript Ejemplo de ajuste wrap
-const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea.";
+```javascript Ejemplo de Ajuste wrap
+const greeting = "¡Hola, Mundo! Soy una línea larga de texto que se ajustará a la siguiente línea.";
 function sayHello() {
   console.log(greeting);
 }
@@ -333,7 +362,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, agrega estos comentarios especiales al final de las líneas en tu bloque de código:
+Para crear diffs, añade 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).
@@ -343,22 +372,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 de los comentarios debe coincidir con tu lenguaje de programación (por ejemplo, `//` para JavaScript o `#` para Python).
+La sintaxis del comentario debe coincidir con tu lenguaje de programación (por ejemplo, `//` para JavaScript o `#` para Python).
 
-```js Ejemplo de diff icon="code" lines
-const greeting = "¡Hola, mundo!"; // [!code ++]
+```js Diff Example 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 Diff Example icon="code" lines
-const greeting = "¡Hola, mundo!"; // [!code ++]
+```js Ejemplo de Diff icon="code" lines
+const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
-  console.log("¡Hola, mundo!"); // [!code --]
+  console.log("Hello, World!"); // [!code --]
   console.log(greeting); // [!code ++]
 }
 sayHello();
diff --git a/fr/code.mdx b/fr/code.mdx
index fd38c0aa1..bbc2d8394 100644
--- a/fr/code.mdx
+++ b/fr/code.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Code"
-description: "Afficher le code en ligne et les blocs de code"
+description: "Afficher du code en ligne et des code blocks"
 icon: "code"
 ---
 
@@ -8,30 +8,30 @@ icon: "code"
   ## Ajout d’exemples de code
 </div>
 
-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.
+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.
 
 <div id="inline-code">
   ### Code en ligne
 </div>
 
-Pour indiquer qu’un `mot` ou une `expression` est du code, entourez-le de backticks (`).
+Pour indiquer qu’un `mot` ou une `expression` est du code, encadrez-le avec des accents graves (`).
 
 ```mdx
-Pour indiquer qu’un « mot » ou une « expression » est du code, entourez-le de backticks (`).
+Pour désigner un `mot` ou une `phrase` comme du code, entourez-le de backticks (`).
 ```
 
 <div id="code-blocks">
-  ### Blocs de code
+  ### Code blocks
 </div>
 
-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.
+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.
 
-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.
+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.
 
-```java HelloWorld.java lignes icône="java"
+```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 !");
     }
 }
 ```
@@ -40,41 +40,41 @@ class HelloWorld {
 ```java HelloWorld.java lines icon="java"
 class HelloWorld {
     public static void main(String[] args) {
-        System.out.println("Bonjour, monde !");
+        System.out.println("Bonjour le monde !");
     }
 }
 ```
 ````
 
 <div id="code-block-options">
-  ## Options des blocs de code
+  ## Options de code block
 </div>
 
-Vous pouvez ajouter des options méta à vos blocs de code pour personnaliser leur apparence.
+Vous pouvez ajouter des options méta à vos code blocks pour personnaliser leur apparence.
 
 <Note>
-  Vous devez indiquer un langage de programmation pour un bloc de code avant d’ajouter toute autre option méta.
+  Vous devez spécifier un langage de programmation pour un code block avant d&#39;ajouter d&#39;autres options méta.
 </Note>
 
 <div id="option-syntax">
   ### Syntaxe des options
 </div>
 
-* **Options de type chaîne et booléen** : Entourez-les avec `""`, `''`, ou ne mettez pas de guillemets.
-* **Options d’expression** : Entourez-les avec `{}`, `""`, ou `''`.
+* **Options de chaînes et booléens** : Encadrez avec `""`, `''` ou sans guillemets.
+* **Options d’expression** : Encadrez avec `{}`, `""` ou `''`.
 
 <div id="syntax-highlighting">
   ### Coloration syntaxique
 </div>
 
-Activez la coloration syntaxique en spécifiant le langage de programmation après les backticks d’ouverture d’un bloc de code.
+Activez la coloration syntaxique en indiquant le langage de programmation après les backticks d’ouverture d’un code block.
 
-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.
+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.
 
 ```java
 class HelloWorld {
     public static void main(String[] args) {
-        System.out.println("Bonjour, le monde !");
+        System.out.println("Bonjour, monde !");
     }
 }
 ```
@@ -89,14 +89,44 @@ class HelloWorld {
 ```
 ````
 
+<div id="twoslash">
+  ### Twoslash
+</div>
+
+Dans les code blocks JavaScript et TypeScript, utilisez `twoslash` pour afficher des informations de type interactives. Les utilisateurs peuvent survoler des variables, des fonctions et des paramètres pour consulter les types et les erreurs, comme dans un IDE.
+
+```ts title="Twoslash Example" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} le ${type} est maintenant adopté !`;
+}
+
+// Survolez pour voir les types inférés
+const message = adoptPet("Mintie", "cat");
+```
+
+````mdx
+```ts title="Exemple Twoslash" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} the ${type} is now adopted! 🎉`;
+}
+
+// Survolez pour voir les types inférés
+const message = adoptPet("Mintie", "cat");
+```
+````
+
 <div id="title">
   ### Titre
 </div>
 
-Ajoutez un titre pour identifier votre exemple de code. Utilisez `title="Votre titre"` ou une chaîne sur une seule ligne.
+Ajoutez un titre pour identifier votre exemple de code. Utilisez `title="Your title"` ou une chaîne sur une seule ligne.
 
-```javascript Exemple de bloc de code
-const hello = "world";
+```javascript Code Block Example
+const hello = "monde";
 ```
 
 ````mdx
@@ -109,15 +139,15 @@ const hello = "world";
   ### Icône
 </div>
 
-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.
+Ajoutez un icon à votre code block à l&#39;aide de la propriété `icon`. Voir [Icônes](/fr/components/icons) pour toutes les options disponibles.
 
 ```javascript icon="square-js"
-const hello = "world";
+const hello = "monde";
 ```
 
 ````mdx
 ```javascript icon="square-js"
-const hello = "monde";
+const hello = "world";
 ```
 ````
 
@@ -125,19 +155,19 @@ const hello = "monde";
   ### Surlignage de lignes
 </div>
 
-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.
+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.
 
-```javascript Exemple de surlignage de lignes highlight= {1-2,5}
-const greeting = "Bonjour, monde !";
-function direBonjour() {
+```javascript Line Highlighting Example highlight= {1-2,5}
+const greeting = "Bonjour, le monde !";
+function sayHello() {
   console.log(greeting);
 }
-direBonjour();
+sayHello();
 ```
 
 ````mdx
-```javascript Exemple de surlignage de lignes highlight={1-2,5}
-const greeting = "Bonjour, monde !";
+```javascript Exemple de mise en évidence de lignes highlight={1-2,5}
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -149,19 +179,19 @@ sayHello();
   ### Mise au point sur des lignes
 </div>
 
-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.
+Concentrez-vous sur des lignes spécifiques dans vos code block en utilisant `focus` avec des numéros de ligne ou des intervalles.
 
-```javascript Exemple de mise au point sur les lignes focus= {2,4-5}
-const greeting = "Bonjour, monde !";
-function direBonjour() {
+```javascript Line Focus Example focus= {2,4-5}
+const greeting = "Bonjour, le monde !";
+function sayHello() {
   console.log(greeting);
 }
-direBonjour();
+sayHello();
 ```
 
 ````mdx
-```javascript Exemple de surlignage de lignes focus={2,4-5}
-const greeting = "Bonjour, le monde !";
+```javascript Exemple de mise en évidence de ligne focus={2,4-5}
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -173,19 +203,19 @@ sayHello();
   ### Afficher les numéros de ligne
 </div>
 
-Affichez les numéros de ligne à gauche de votre bloc de code avec `lines`.
+Affichez les numéros de ligne à gauche de votre code block avec `lines`.
 
-```javascript Afficher les numéros de ligne Exemple de lignes
-const greeting = "Bonjour, monde !";
-function direBonjour() {
+```javascript Show Line Numbers Example lines
+const greeting = "Bonjour, le monde !";
+function sayHello() {
   console.log(greeting);
 }
-direBonjour();
+sayHello();
 ```
 
 ````mdx
-```javascript Afficher les numéros de ligne Exemples de lignes
-const greeting = "Bonjour, le monde !";
+```javascript Show Line Numbers Exemple lines
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -197,9 +227,9 @@ sayHello();
   ### Dépliable
 </div>
 
-Permettez aux utilisateurs d’ouvrir et de réduire de longs blocs de code à l’aide de `expandable`.
+Permettez aux utilisateurs d’ouvrir et de replier de longs code block à l’aide de `expandable`.
 
-```python Exemple extensible extensible
+```python Expandable Example expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -215,11 +245,11 @@ class Book:
 class Library:
     def __init__(self):
         self.books: Dict[str, Book] = {}
-        self.checkouts: Dict[str, List[str]] = {}  # patron -> list of ISBNs
+        self.checkouts: Dict[str, List[str]] = {}  # usager -> liste des ISBN
 
     def add_book(self, book: Book) -> None:
         if book.isbn in self.books:
-            raise ValueError(f"Un livre avec l’ISBN {book.isbn} existe déjà")
+            raise ValueError(f"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:
@@ -234,7 +264,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’emprunts")
+            raise ValueError("L'usager a atteint la limite d'emprunt")
 
         book.checked_out = True
         book.due_date = datetime.now() + timedelta(days=days)
@@ -253,7 +283,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)
@@ -280,17 +310,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
+```python Exemple extensible expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -306,10 +336,10 @@ if __name__ == "__main__":
   ### Retour à la ligne
 </div>
 
-Activez le renvoi à la ligne pour les longues lignes avec `wrap`. Cela évite le défilement horizontal et facilite la lecture des lignes longues.
+Activez l’habillage du texte pour les lignes longues avec `wrap`. Cela évite le défilement horizontal et facilite la lecture des lignes longues.
 
-```javascript Exemple d’habillage
-const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui passera à la ligne suivante.";
+```javascript Wrap Example wrap
+const greeting = "Bonjour, le monde ! Je suis une longue ligne de texte qui va passer à la ligne suivante.";
 function sayHello() {
   console.log(greeting);
 }
@@ -317,8 +347,8 @@ sayHello();
 ```
 
 ````mdx
-```javascript Exemple d’habillage wrap
-const greeting = "Bonjour, monde ! Je suis une longue ligne de texte qui va se poursuivre à la ligne suivante.";
+```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.";
 function sayHello() {
   console.log(greeting);
 }
@@ -330,34 +360,34 @@ sayHello();
   ### Diff
 </div>
 
-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.
+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.
 
-Pour créer des diffs, ajoutez ces commentaires spéciaux à la fin des lignes dans votre bloc de code :
+Pour créer des diffs, ajoutez ces commentaires spéciaux à la fin des lignes dans votre code block :
 
-* `// [!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).
+* `// [!code ++]` : Marquez une ligne comme ajoutée (mise en évidence en vert).
+* `// [!code --]` : Marquez une ligne comme supprimée (mise en évidence en rouge).
 
-Pour plusieurs lignes consécutives, spécifiez le nombre de lignes après un deux-points :
+Pour plusieurs lignes consécutives, indiquez le nombre de lignes après un deux-points :
 
-* `// [!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.
+* `// [!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.
 
 La syntaxe des commentaires doit correspondre à votre langage de programmation (par exemple, `//` pour JavaScript ou `#` pour Python).
 
-```js Exemple de diff icon="code" lines
-const greeting = "Bonjour, monde !"; // [!code ++]
+```js Diff Example icon="code" lines
+const greeting = "Bonjour, le monde !"; // [!code ++]
 function sayHello() {
-  console.log("Bonjour, monde !"); // [!code --]
+  console.log("Bonjour, le monde !"); // [!code --]
   console.log(greeting); // [!code ++]
 }
 sayHello();
 ```
 
 ````text
-```js Exemple de diff icon="code" lines
-const greeting = "Bonjour, monde !"; // [!code ++]
+```js Exemple Diff icon="code" lines
+const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
-  console.log("Bonjour, monde !"); // [!code --]
+  console.log("Hello, World!"); // [!code --]
   console.log(greeting); // [!code ++]
 }
 sayHello();
diff --git a/zh/code.mdx b/zh/code.mdx
index 74ad6c62e..6b1f9d620 100644
--- a/zh/code.mdx
+++ b/zh/code.mdx
@@ -8,27 +8,27 @@ icon: "code"
   ## 添加代码示例
 </div>
 
-你可以添加行内代码片段或代码块。代码块支持用于语法高亮、标题、行高亮、图标等的元选项。
+你可以添加行内代码片段或代码块。代码块支持用于语法高亮、title、行高亮、icon 等的元选项，以及更多功能。
 
 <div id="inline-code">
   ### 行内代码
 </div>
 
-要将某个`单词`或`短语`标记为代码，请用反引号（`）将其包裹。
+要将 `word` 或 `phrase` 表示为代码，请用反引号（`）包裹。
 
 ```mdx
-要将某个 `单词` 或 `短语` 标记为代码，请用反引号（`）将其包裹起来。
+要将`单词`或`短语`标记为代码，请用反引号（`）将其包围。
 ```
 
 <div id="code-blocks">
   ### 代码块
 </div>
 
-使用[围栏代码块](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)，将代码用三个反引号包裹起来。代码块可直接复制；如果启用了文档助手，用户还可以让 AI 解释代码。
+使用[围栏代码块](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)，即用三个反引号将代码包裹起来。代码块支持复制；如果启用了 AI 助手，用户还可以让 AI 解释代码。
 
-为语法高亮和启用元选项指定编程语言。在语言名后添加任意元选项，例如标题或图标。
+为实现语法高亮并启用元选项，请指定编程语言。在语言标识后添加任意元选项，例如 title 或 icon。
 
-```java HelloWorld.java 行数图标 icon="java"
+```java HelloWorld.java lines icon="java"
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("你好，世界！");
@@ -50,7 +50,7 @@ class HelloWorld {
   ## 代码块选项
 </div>
 
-你可以为代码块添加元选项，以自定义其外观。
+你可以为代码块添加元选项，以自定义其显示效果。
 
 <Note>
   在添加任何其他元选项之前，必须先为代码块指定编程语言。
@@ -60,16 +60,16 @@ class HelloWorld {
   ### 选项语法
 </div>
 
-* **字符串和布尔选项**：使用 `""`、`''`，或不加引号包裹。
-* **表达式选项**：使用 `{}`、`""`，或 `''` 包裹。
+* **字符串与布尔选项**：可用 `""`、`''`，或不加引号包裹。
+* **表达式选项**：可用 `{}`、`""`，或 `''` 包裹。
 
 <div id="syntax-highlighting">
   ### 语法高亮
 </div>
 
-在代码块的起始反引号后指定编程语言即可启用语法高亮。
+在代码块的起始三个反引号后紧跟编程语言名称即可启用语法高亮。
 
-我们使用 [Shiki](https://shiki.style/) 进行语法高亮，并支持所有可用语言。请在 Shiki 文档中查看完整的[语言](https://shiki.style/languages)列表。
+我们使用 [Shiki](https://shiki.style/) 提供语法高亮，支持其所有可用语言。完整列表请参见 Shiki 文档中的 [languages](https://shiki.style/languages)。
 
 ```java
 class HelloWorld {
@@ -89,13 +89,43 @@ class HelloWorld {
 ```
 ````
 
+<div id="twoslash">
+  ### Twoslash
+</div>
+
+在 JavaScript 和 TypeScript 的代码块中，使用 `twoslash` 可启用交互式类型信息。用户将鼠标悬停在变量、函数和参数上时，可像在 IDE 中一样查看类型和错误。
+
+```ts title="Twoslash Example" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} 这只 ${type} 现在被领养了！`;
+}
+
+// 悬停查看推断类型
+const message = adoptPet("Mintie", "cat");
+```
+
+````mdx
+```ts title="Twoslash 示例" twoslash
+type Pet = "cat" | "dog" | "hamster";
+
+function adoptPet(name: string, type: Pet) {
+  return `${name} the ${type} is now adopted! 🎉`;
+}
+
+// 悬停查看推断的类型
+const message = adoptPet("Mintie", "cat");
+```
+````
+
 <div id="title">
   ### 标题
 </div>
 
-为代码示例添加标题。可使用 `title="Your title"`，或在单独一行放置字符串。
+为代码示例添加标题。使用 `title="Your title"`，或在单独一行提供一个字符串。
 
-```javascript 代码块示例
+```javascript Code Block Example
 const hello = "world";
 ```
 
@@ -109,7 +139,7 @@ const hello = "world";
   ### 图标
 </div>
 
-使用 `icon` 属性为代码块添加图标。查看 [Icons](/zh/components/icons) 以了解所有可用选项。
+使用 `icon` 属性为代码块添加图标。参见[图标](/zh/components/icons)以查看所有可用选项。
 
 ```javascript icon="square-js"
 const hello = "world";
@@ -125,9 +155,9 @@ const hello = "world";
   ### 行高亮
 </div>
 
-在代码块中使用 `highlight` 并指定行号或范围，以高亮特定行。
+在代码块中使用 `highlight` 并指定要高亮的行号或范围，以突出显示特定行。
 
-```javascript 行高亮示例 highlight= {1-2,5}
+```javascript Line Highlighting Example highlight= {1-2,5}
 const greeting = "你好，世界！";
 function sayHello() {
   console.log(greeting);
@@ -137,7 +167,7 @@ sayHello();
 
 ````mdx
 ```javascript 行高亮示例 highlight={1-2,5}
-const greeting = "你好，世界！";
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -145,13 +175,13 @@ sayHello();
 ```
 ````
 
-<div id="line-focusing">
-  ### 行聚焦
+<div id="line-highlighting">
+  ### 行高亮
 </div>
 
-在代码块中使用 `focus` 并指定行号或范围，以高亮显示特定行。
+在代码块中可使用带有行号或范围的 `focus` 来高亮指定行。
 
-```javascript 行聚焦示例 focus= {2,4-5}
+```javascript Line Focus Example focus= {2,4-5}
 const greeting = "你好，世界！";
 function sayHello() {
   console.log(greeting);
@@ -160,8 +190,8 @@ sayHello();
 ```
 
 ````mdx
-```javascript 行高亮示例 focus={2,4-5}
-const greeting = "你好，世界！";
+```javascript 行聚焦示例 focus={2,4-5}
+const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
@@ -175,7 +205,7 @@ sayHello();
 
 使用 `lines` 在代码块左侧显示行号。
 
-```javascript 显示行号 示例行
+```javascript Show Line Numbers Example lines
 const greeting = "你好，世界！";
 function sayHello() {
   console.log(greeting);
@@ -197,9 +227,9 @@ sayHello();
   ### 可展开
 </div>
 
-使用 `expandable` 让用户展开或收起长代码块。
+使用 `expandable` 让用户展开或折叠较长的代码块。
 
-```python 可展开示例 expandable
+```python Expandable Example expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -215,11 +245,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:
@@ -228,13 +258,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)
@@ -243,7 +273,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:
@@ -253,7 +283,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)
@@ -271,7 +301,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"),
@@ -280,10 +310,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()
@@ -295,7 +325,7 @@ from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
 
-# …
+# ...
 
 if __name__ == "__main__":
     main()
@@ -303,13 +333,13 @@ if __name__ == "__main__":
 ````
 
 <div id="wrap">
-  ### Wrap
+  ### 自动换行
 </div>
 
-使用 `wrap` 为长文本启用自动换行。这样可避免水平滚动，并使长行更易读。
+使用 `wrap` 为长行启用自动换行。这样可以防止横向滚动，并使长行更易读。
 
-```javascript 换行 示例 wrap
-const greeting = "你好，世界！我是一段很长的文本，会在末尾自动换到下一行。";
+```javascript Wrap Example wrap
+const greeting = "你好，世界！我是一行很长的文本，会换行到下一行。";
 function sayHello() {
   console.log(greeting);
 }
@@ -317,8 +347,8 @@ sayHello();
 ```
 
 ````mdx
-```javascript 自动换行示例 wrap
-const greeting = "Hello, World! 我是一段很长的文本，会自动换到下一行。";
+```javascript 换行示例 wrap
+const greeting = "Hello, World! I am a long line of text that will wrap to the next line.";
 function sayHello() {
   console.log(greeting);
 }
@@ -327,24 +357,24 @@ sayHello();
 ````
 
 <div id="diff">
-  ### 差异对比
+  ### Diff
 </div>
 
-在代码块中以可视化方式展示新增或删除的行。新增行以绿色高亮，删除行以红色高亮。
+在代码块中可视化展示新增或删除的行。新增行以绿色高亮，删除行以红色高亮。
 
-要创建差异对比，请在代码块的行尾添加以下特殊注释：
+要创建差异视图，请在代码块的行尾添加以下特殊注释：
 
-* `// [!code ++]`: 将该行标记为新增（绿色高亮）。
-* `// [!code --]`: 将该行标记为删除（红色高亮）。
+* `// [!code ++]`：将该行标记为新增（绿色高亮）。
+* `// [!code --]`：将该行标记为删除（红色高亮）。
 
-对于多行连续的情况，可在冒号后指定行数：
+对多行连续内容，可在冒号后指定行数：
 
-* `// [!code ++:3]`: 将当前行及其后两行标记为新增。
-* `// [!code --:5]`: 将当前行及其后四行标记为删除。
+* `// [!code ++:3]`：将当前行及其后两行标记为新增。
+* `// [!code --:5]`：将当前行及其后四行标记为删除。
 
-注释语法必须与所用编程语言匹配（例如，JavaScript 使用 `//`，Python 使用 `#`）。
+注释语法必须与所使用的编程语言一致（例如，JavaScript 使用 `//`，Python 使用 `#`）。
 
-```js 差异示例 icon="code" lines
+```js Diff Example icon="code" lines
 const greeting = "你好，世界！"; // [!code ++]
 function sayHello() {
   console.log("你好，世界！"); // [!code --]
@@ -355,9 +385,9 @@ sayHello();
 
 ````text
 ```js Diff 示例 icon="code" lines
-const greeting = "你好，世界！"; // [!code ++]
+const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
-  console.log("你好，世界！"); // [!code --]
+  console.log("Hello, World!"); // [!code --]
   console.log(greeting); // [!code ++]
 }
 sayHello();