90 lines
1.6 KiB
Plaintext
90 lines
1.6 KiB
Plaintext
---
|
|
title: "Code Block"
|
|
description: "Allows you to render highlighted code snippets"
|
|
component: true
|
|
---
|
|
|
|
<ComponentExample name="code-block-demo" />
|
|
|
|
## Usage
|
|
|
|
---
|
|
|
|
```tsx
|
|
import { CodeBlock } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
<CodeBlock
|
|
snippets={[
|
|
{
|
|
language: "tsx",
|
|
label: "Label",
|
|
code: "import { useProduct } from \"medusa-react\"",
|
|
},
|
|
]}
|
|
>
|
|
<CodeBlock.Header />
|
|
<CodeBlock.Body />
|
|
</CodeBlock>
|
|
```
|
|
|
|
|
|
## API Reference
|
|
|
|
---
|
|
|
|
<ComponentReference mainComponent="CodeBlock" componentsToShow={[
|
|
"CodeBlock",
|
|
"CodeBlock.Header",
|
|
"CodeBlock.Header.Meta",
|
|
"CodeBlock.Body"
|
|
]} />
|
|
|
|
## Usage Outside Medusa Admin
|
|
|
|
---
|
|
|
|
If you're using the `CodeBlock` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `CodeBlock.Header` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
|
|
|
|
```tsx
|
|
<TooltipProvider>
|
|
<CodeBlock
|
|
snippets={[
|
|
{
|
|
language: "tsx",
|
|
label: "Label",
|
|
code: "import { useProduct } from \"medusa-react\"",
|
|
},
|
|
]}
|
|
>
|
|
<CodeBlock.Header />
|
|
<CodeBlock.Body />
|
|
</CodeBlock>
|
|
</TooltipProvider>
|
|
```
|
|
|
|
## Examples
|
|
|
|
---
|
|
|
|
### Single snippet
|
|
|
|
If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:
|
|
|
|
<ComponentExample name="code-block-single" />
|
|
|
|
### No Header
|
|
|
|
You could also choose to omit the header entirely:
|
|
|
|
<ComponentExample name="code-block-no-header" />
|
|
|
|
### No Line Numbers
|
|
|
|
<ComponentExample name="code-block-no-lines" />
|
|
|
|
### No Copy Button
|
|
|
|
<ComponentExample name="code-block-no-copy" />
|