# CodeBlock

*Display beautifully formatted code snippets with syntax highlighting, line numbers, and copy functionality for multiple programming languages.*

The `CodeBlock` [widget](../../01_Onboarding/02_Concepts/03_Widgets.md) displays formatted code snippets with syntax highlighting. It supports multiple programming languages and features line numbers and copy buttons for better user experience. Use [Size](../../04_ApiReference/IvyShared/Size.md) for `.Width()` and `.Height()` to control dimensions.

```csharp
Layout.Vertical()
    | new CodeBlock(@"function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n-1) + fibonacci(n-2);
}
    
// Print first 10 Fibonacci numbers
for (let i = 0; i < 10; i++) {
  console.log(fibonacci(i));
  }
  ")
      .ShowLineNumbers()
      .ShowCopyButton()
      .Language(Languages.Javascript)
      .Width(Size.Full())
      .Height(Size.Auto())
```



## API

[View Source: CodeBlock.cs](https://github.com/Ivy-Interactive/Ivy-Framework/blob/main/src/Ivy/Widgets/Primitives/CodeBlock.cs)

### Constructors

| Signature |
|-----------|
| `new CodeBlock(string content, Languages language = Languages.Csharp)` |


### Properties

| Name | Type | Setters |
|------|------|---------|
| `Content` | `string` | `Content` |
| `Height` | `Size` | - |
| `Language` | `Languages` | `Language` |
| `Scale` | `Scale?` | - |
| `ShowBorder` | `bool` | `ShowBorder` |
| `ShowCopyButton` | `bool` | `ShowCopyButton` |
| `ShowLineNumbers` | `bool` | `ShowLineNumbers` |
| `Visible` | `bool` | - |
| `Width` | `Size` | - |