filament/packages/forms/docs/20-code-editor.md

title

title
Code editor

import AutoScreenshot from "@components/AutoScreenshot.astro" import UtilityInjection from "@components/UtilityInjection.astro"

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')

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.