mirror of
https://github.com/upstash/context7.git
synced 2026-09-14 19:09:34 +08:00
6d777619c2
Co-authored-by: Context7 Agent <docs-agent@context7.com> Co-authored-by: Josh <josh@upstash.com> Co-authored-by: context7[bot] <236830434+context7[bot]@users.noreply.github.com>
43 lines
675 B
Plaintext
43 lines
675 B
Plaintext
---
|
|
title: Code groups
|
|
description: Show code examples in tabs
|
|
---
|
|
|
|
Place titled code fences inside `<CodeGroup>`. Use `<CodeBlock>` when code comes from an MDX component.
|
|
|
|
## Usage
|
|
|
|
````mdx
|
|
<CodeGroup>
|
|
```js JavaScript
|
|
console.log("hello")
|
|
```
|
|
|
|
```py Python
|
|
print("hello")
|
|
```
|
|
</CodeGroup>
|
|
|
|
<CodeBlock language="ts" filename="index.ts" lines>
|
|
{"const ready = true"}
|
|
</CodeBlock>
|
|
````
|
|
|
|
`<CodeBlock>` also accepts `icon`, `highlight`, `focus`, `wrap`, and `expandable`.
|
|
|
|
## Example
|
|
|
|
<CodeGroup>
|
|
```js JavaScript
|
|
console.log("hello")
|
|
```
|
|
|
|
```py Python
|
|
print("hello")
|
|
```
|
|
</CodeGroup>
|
|
|
|
<CodeBlock language="ts" filename="index.ts" lines>
|
|
{"const ready = true"}
|
|
</CodeBlock>
|