Code Groups
Display groups of code blocks with syntax highlighting.
Use the <CodeGroup />
component to display multiple code blocks together, useful for showing variations of the "same" code in a different language.
Example
Logging: Hello World
console.log("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:
Logging
console.log("Hello World");
Exiting an application
process.exit(0);
Props
title
string
optional
The title of the code block.
defaultLanguage
string
optional
The default language to display code blocks in. Defaults to the first language in the group.
synchronize
boolean
optional
If true
, synchronizes the language selection across multiple code groups with the same language defined.