React Components

# Code

## Overview

---

```
import { Text } from '@ovhcloud/ods-react';
```

## Anatomy

---

Code

---

```
import { Text } from '@ovhcloud/ods-react';
```

## Code

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
canCopy

 | `boolean` | - | `false` | Whether the copy button is displayed. |
| 

children

 | `string` |  | `undefined` | The code to display. |
| 

highlighter

 | `object` | - | `{}` | Configuration of a specific code highlighter (see beneath for more details). |
| 

language

 | `Array` |  | `-` | The programming language displayed. |
| 

theme

 | `ThemeRegistrationAny` |  | `-` | The theme to apply to the code. |
| 

labelCopy

 | `string` | - | `undefined` | The initial tooltip label on copy button. |
| 

labelCopySuccess

 | `string` | - | `undefined` | The tooltip label on copy button after a successful copy. |
| 

onCopy

 | `() => void` | - | `undefined` | Callback fired when the text is copied. |
| 

positionerStyle

 | `CSSProperties` | - | `undefined` | Custom style applied to the overlay positioner. Useful if you want to override the overlay z-index. |

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-code-border-radius | calc(var(--ods-theme-border-radius) / 2) | 
 |
| --ods-code-padding-horizontal | calc(var(--ods-theme-padding-horizontal) * 1.5) | 

 |
| --ods-code-padding-vertical | calc(var(--ods-theme-padding-vertical) * 1.5) | 

 |
| --ods-code-primary-color | #fff | 

 |
| --ods-code-secondary-color | #000 | 

 |
| --ods-code-trigger-background-color | #fff | 

 |
| --ods-code-trigger-background-color-active | var(--ods-color-neutral-700) | 

 |
| --ods-code-trigger-background-color-hover | var(--ods-color-neutral-600) | 

 |
| --ods-code-trigger-outline-color | #fff | 

 |

## Setup custom highlighter

---

By default, `Code` provides the lightest bundle needed to display your code. But you may want to use some highlighter to provide a better visual to your end-users.

`Code` does support all [Shiki v3](https://shiki.style/) languages and themes.

You can test all languages and themes in the [Shiki playground](https://textmate-grammars-themes.netlify.app/) .

To setup an highlighter:

-   pick a [language](https://shiki.style/languages) and a [theme](https://shiki.style/themes) .
-   include both on your app side.
-   pass them to the `Code component`.

```typescript
import { Code } from '@ovhcloud/ods-react';
import lang from '@shikijs/langs/typescript';
import theme from '@shikijs/themes/nord';
const HighlightedCode = () => (
  <Code
    highlighter={{
      language: lang,
      theme: theme,
    }}>
    console.log('Hello World');
  </Code>
);
```

## Examples

---

### Default

```
console.log('Hello world');
```

```jsx
<Code>
  console.log('Hello world');
</Code>
```

### Multiline

```jsx
{
  globals: {
    imports: `import { Code } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Code>
      {`function isTargetInElement(event, element) {
  if (!element) {    return false;  }
    return element.contains(event.target) || event.composedPath().includes(element);  }`}
    </Code>
}
```

### With copy button enabled

```jsx
{
  globals: {
    imports: `import { Code } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Code canCopy>
      {`import { Text } from '@ovhcloud/ods-react';`}
    </Code>
}
```

### Custom labels

```
console.log('Hello world');
```

```jsx
<Code
  canCopy
  labelCopy="Click to copy"
  labelCopySuccess="Successfully copied"
>
  console.log('Hello world');
</Code>
```

## Recipes

---

No recipe defined for now.