> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Code editor

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/forms/code-editor.md).

## Introduction

The code editor component allows you to write code in a textarea with line numbers. By default, no syntax highlighting is applied.

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\CodeEditor;

CodeEditor::make('code')
```

Loading preview

![Code editor](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/code-editor/simple.jpg)

## Using language syntax highlighting

You may change the language syntax highlighting of the code editor using the `language()` method. The editor supports the following languages:

* C++
* CSS
* Go
* HTML
* Java
* JavaScript
* JSON
* Markdown
* PHP
* Python
* SQL
* XML
* YAML

You can open the `Filament\Forms\Components\CodeEditor\Enums\Language` enum class to see this list. To switch to using JavaScript syntax highlighting, you can use the `Language::JavaScript` enum value:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\CodeEditor\Enums\Language;

CodeEditor::make('code')
    ->language(Language::JavaScript)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

Loading preview

![Code editor with syntax highlighting](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/code-editor/language.jpg)

## Allowing lines to wrap

By default, long lines in the code editor will create a horizontal scrollbar. If you would like to allow long lines to wrap instead, you may use the `wrap()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\CodeEditor;

CodeEditor::make('code')
    ->wrap()
```

Loading preview

![Code editor with line wrapping](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/code-editor/wrap.jpg)

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/forms/docs/20-code-editor.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.