Code Groups

Use the <CodeGroup /> component to display multiple code blocks together, useful for showing variations of the "same" code in a different language.

Example

console.log("Hello World");

print('Hello World!')

void main() {
  print('Hello World!');
}

<CodeGroup title="Logging: Hello World">
  ```javascript
  console.log("Hello World");
  ```

  ```python
  print('Hello World!')
  ```

  ```dart
  void main() {
    print('Hello World!');
  }
  ```
</CodeGroup>

Synchronizing languages

In some scenarios, you may wish to synchronize the language selection across multiple code groups. You can do this by setting the synchronize prop on each <CodeGroup /> component. For example, the following code groups will synchronize their language selection:

console.log("Hello World");

print('Hello World!');

process.exit(0);

exit(0);

Props