> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Block

> A syntax-highlighted code display widget with copy functionality for showcasing code snippets with proper formatting and user-friendly interactions.

<Warning>
  **Beta Widget - Stability Notice**

  This widget is currently in beta. While functional, some aspects may change before the stable release:

  * **Hardcoded colors**: Uses fixed colors that don't fully adapt to theme changes
  * **Dark theme only**: Currently optimized for dark themes only
  * **Loading states**: Basic loading and error handling that will be enhanced
  * **Copy feedback**: Copy button works but visual feedback for successful copying is planned for future releases

  These limitations will be addressed in upcoming releases as the widget moves toward stable release.
</Warning>

## Example

<Frame caption="Code block with syntax highlighting and copy functionality displaying JSON data.">
  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/code-block/code_block_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=077d0984902f142494538090712cd1ff" alt="Basic code block example" noZoom className="block dark:hidden" width="1536" height="768" data-path="images/widgets/utilities/code-block/code_block_light.png" />

  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/code-block/code_block_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=ee77e9640c8f8ecdb42955d004976030" alt="Basic code block example" noZoom className="hidden dark:block" width="1536" height="768" data-path="images/widgets/utilities/code-block/code_block_dark.png" />
</Frame>

<CodeGroup>
  ```dart Basic Usage lines theme={null}
  NeoCodeBlock(
    language: 'json',
    code: '''
  {
    "products": [
      {
        "name": "Coca-Cola",
        "price": 2.99,
        "category": "beverages"
      },
      {
        "name": "Fanta Orange",
        "price": 2.79,
        "category": "beverages"
      },
      {
        "name": "Sprite",
        "price": 2.89,
        "category": "beverages"
      }
    ]
  }''',
  ),
  ```
</CodeGroup>

## Properties

### Required

<ParamField path="code" type="String" required>
  The code content to display with syntax highlighting.
</ParamField>

### Content

<ParamField path="language" type="String" default="dart">
  The programming language for syntax highlighting. Supports common languages like 'json', 'javascript', 'typescript', 'python', 'yaml', etc.
</ParamField>

## Best Practices

* **Width Constraints**: Always provide width constraints to prevent layout issues by wrapping in `ConstrainedBox`, `SizedBox`, `Expanded`, etc.
* **Code Formatting**: Use proper indentation and formatting in your code strings for better readability.

## Integration Notes

* **Copy Functionality**: The copy button automatically copies the entire code content to the system clipboard.
* **Text Selection**: Users can manually select and copy portions of the code using standard text selection gestures.
* **Loading States**: Shows a loading indicator while the syntax highlighter initializes.