Languages

Version

Theme

Forms

Code editor

Introduction

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

use Filament\Forms\Components\CodeEditor;
 
CodeEditor::make('code')
Code editor

Using language syntax highlighting

You may change the language syntax highlighting of the code editor using the language() method. The editor supports CSS, HTML, JavaScript, JSON and PHP. You can open the Filament\Forms\Components\CodeEditor\Enums\Language enum class to see the full list. To switch to using JavaScript syntax highlighting, you can use the Language::JavaScript enum value:

use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\CodeEditor\Enums\Language;
 
CodeEditor::make('code')
->language(Language::JavaScript)
As well as allowing a static value, the language() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters. Learn more about utility injection.
Utility Type Parameter Description
Field Filament\Forms\Components\Field $component The current field component instance.
Get function Filament\Schemas\Components\Utilities\Get $get A function for retrieving values from the current form data. Validation is not run.
Livewire Livewire\Component $livewire The Livewire component instance.
Eloquent model FQN ?string<Illuminate\Database\Eloquent\Model> $model The Eloquent model FQN for the current schema.
Operation string $operation The current operation being performed by the schema. Usually create, edit, or view.
Raw state mixed $rawState The current value of the field, before state casts were applied. Validation is not run.
Eloquent record ?Illuminate\Database\Eloquent\Model $record The Eloquent record for the current schema.
State mixed $state The current value of the field. Validation is not run.
Code editor with syntax highlighting
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

Previous
Slider