Saltar al contenido principal
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 diferentes lenguajes de programación o ver enfoques alternativos para la misma tarea. 
console.log("Hello World");
Los grupos de código heredan el estilo global de tu archivo docs.json. Personaliza tu tema usando styling.codeblocks. Consulta Settings para ver las opciones de configuración. Los grupos de código se sincronizan automáticamente con otros grupos de código y con pestañas en la misma página cuando sus etiquetas coinciden. Cuando seleccionas un lenguaje en un grupo de código, todas las pestañas y grupos de código con etiquetas coincidentes se actualizan para mostrar el mismo lenguaje.

​
Crear grupos de código

Para crear un grupo de código, envuelve varios bloques de código con etiquetas <CodeGroup>. Cada bloque de código debe incluir un título, que se convertirá en la etiqueta de la Tab. 
<CodeGroup>

```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("¡Hola, Mundo!");
    }
}
```

</CodeGroup>

​
Menú desplegable de idiomas

Puedes sustituir las pestañas de un grupo de código por un menú desplegable para cambiar entre idiomas usando la prop dropdown.
helloWorld.js
console.log("Hello World");

<CodeGroup dropdown>

```javascript helloWorld.js
console.log("Hola Mundo");
```

```python hello_world.py
print('¡Hola Mundo!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("¡Hola, Mundo!");
    }
}
```
</CodeGroup>