Code editor

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.

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 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:

use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\CodeEditor\Enums\Language;

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

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:

use Filament\Forms\Components\CodeEditor;

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

Slider Hidden

Introduction

Guides

Resources

Tables

Schemas

Forms

Infolists

Actions

Notifications

Widgets

Configuration

Navigation

Users

Styling

Advanced

Testing

Plugins

Components

Deployment

Upgrading

Introduction

Using language syntax highlighting

Allowing lines to wrap

​Introduction

​Using language syntax highlighting

​Allowing lines to wrap

Introduction

Using language syntax highlighting

Allowing lines to wrap