Code Group

Les groupes de code affichent plusieurs blocs de code sous forme d’onglets interchangeables. Chaque onglet est automatiquement nommé à partir des métadonnées [label] du bloc de code.

Utilisation basique

import { createApp } from './app'

const app = createApp()
app.listen(3000)

export function createApp() {
  return {
    listen(port: number) {
      console.log(`Listening on port ${port}`)
    }
  }
}

:::codegroup
  ```ts [index.ts]
  import { createApp } from './app'

  const app = createApp()
  app.listen(3000)
  ```

  ```ts [app.ts]
  export function createApp() {
    return {
      listen(port: number) {
        console.log(`Listening on port ${port}`)
      }
    }
  }
  ```
:::

Syntaxe

Encapsulez plusieurs blocs de code délimités dans une directive :::codegroup. Utilisez la syntaxe [label] sur chaque bloc de code pour définir le nom de l’onglet :

:::codegroup
  ```language [Libellé de l'onglet]
  code ici
  ```

  ```language [Autre onglet]
  code ici
  ```
:::

Exemple multi-langages

pnpm add @explainer/ui

npm install @explainer/ui

yarn add @explainer/ui