Code Editor

The codeeditor field edits code in Monaco, the editor behind VS Code, with a toolbar and a fullscreen mode. It saves the code as plain text. Monaco loads the first time a page shows a code field, so other pages don't pay for its size.

Default editor

With no options, the editor highlights PHP, wraps long lines at the edge of the field and follows the page's light or dark mode.

The toolbar runs undo (Ctrl+Z) and redo (Ctrl+Y), find (Ctrl+F) and replace (Ctrl+H), Format Code (Shift+Alt+F), Word Wrap (Alt+Z) and fullscreen (Ctrl+Shift+F, and Escape to leave it), with the language name on the right. Format Code is disabled for a language that has no formatter.

fields:
    php_code:
        label: PHP
        type: codeeditor
        comment: The toolbar runs undo, find, replace, format, word wrap and fullscreen.

Language

language picks the highlighting: php (the default), html, css, scss, less, javascript, json, yaml, markdown, twig or plaintext. The short names js, md, yml, htm, sass, txt and plain_text work too.

Emmet abbreviations expand with Tab in html, twig and php (HTML abbreviations) and in css, scss and less. HTML, CSS (with SCSS and Less) and JSON also get language aware completion, CSS and JSON mark errors as you type, and Format Code works for those languages.

fields:
    template:
        label: Template
        type: codeeditor
        language: twig
        comment: Twig highlighting, where Emmet abbreviations expand with Tab.

Size

size sets the starting height: tiny, small, large (the default), huge or giant. The editor still grows with its content.

fields:
    css_code:
        label: CSS
        type: codeeditor
        language: css
        size: small
        comment: A small editor that still grows with its content.

Word wrap

wordWrap is fluid (the default, wrap at the edge of the field), off, 40 or 80 (wrap at that column). true and false mean fluid and off. showPrintMargin draws a ruler at column 80, or at 40 when wordWrap is 40. The Word Wrap button turns wrapping on and off while editing, without changing the setting.

fields:
    html_code:
        label: HTML
        type: codeeditor
        language: html
        wordWrap: 80
        showPrintMargin: true
        comment: Long lines wrap at column 80, marked by the print margin.

Indentation and folding

tabSize sets the indent width (4 by default), and useSoftTabs: false indents with tab characters instead of spaces. showInvisibles shows spaces and tabs as faint marks. codeFolding: markbegin keeps the fold arrows in the gutter in view, where manual (the default) shows them on hover.

fields:
    config_code:
        label: Config
        type: codeeditor
        language: yaml
        tabSize: 2
        showInvisibles: true
        codeFolding: markbegin
        comment: Tab indents by two spaces, spaces show as dots, and the fold arrows always show.

Appearance

fontSize sets the text size in pixels (12 by default), and margin the space above the first line and below the last (the editor keeps at least 8 pixels). showGutter: false hides the line numbers and fold arrows, highlightActiveLine: false stops highlighting the line with the cursor, and displayIndentGuides: false hides the indent guides.

theme takes vs, vs-dark, hc-black or hc-light. Monaco applies one theme to the whole page, so editors that name different themes all end up with the last one applied. Leave it empty, as these examples do, to follow the page color mode.

fields:
    script_code:
        label: Script
        type: codeeditor
        language: javascript
        fontSize: 14
        margin: 16
        showGutter: false
        highlightActiveLine: false
        displayIndentGuides: false
        comment: Larger text with more padding, and no line numbers, line highlight or indent guides.

Typing aids

autocompletion: live suggests words and properties while you type. With manual (the default) or basic, suggestions wait for Ctrl+Space. autoClosing: false stops the editor closing brackets, quotes and tags for you, and enableSnippets: false leaves snippets out of the suggestions.

fields:
    scss_code:
        label: SCSS
        type: codeeditor
        language: scss
        autocompletion: live
        autoClosing: false
        comment: Suggestions appear while typing, and brackets and quotes are not closed for you.

Read-only

A readOnly editor keeps its toolbar, with the editing buttons disabled, and the code can still be selected, searched and copied. A disabled field looks the same, and its value is not saved.

fields:
    generated_code:
        label: Generated JSON
        type: codeeditor
        language: json
        readOnly: true
        comment: The code can be selected, searched and copied, but not changed.

Preview

In preview mode the field shows the code as escaped plain text, without loading the editor, and posts nothing. This example's form is made with previewMode on.

fields:
    embed_code:
        label: Embed Code
        type: codeeditor
        language: html

Options

Option	Description
language	the language to highlight, see Language. Default: php.
size	the starting height: tiny, small, large, huge or giant. Default: large.
wordWrap	fluid, off, 40 or 80. Default: fluid.
showPrintMargin	draws a ruler at column 80, or 40 with wordWrap: 40. Default: false.
tabSize	the indent width in spaces. Default: 4.
useSoftTabs	indents with spaces rather than tab characters. Default: true.
showInvisibles	shows spaces and tabs. Default: false.
codeFolding	manual shows the fold arrows on hover, markbegin always. Default: manual.
fontSize	the text size in pixels. Default: 12.
margin	the space above the first line and below the last, in pixels. Default: 0 (at least 8 is kept).
showGutter	shows the line numbers and fold arrows. Default: true.
highlightActiveLine	highlights the line with the cursor. Default: true.
displayIndentGuides	shows the indent guides. Default: true.
theme	vs, vs-dark, hc-black or hc-light, or empty to follow the page color mode. Default: empty.
autocompletion	live suggests while typing, manual and basic on Ctrl+Space. Default: manual.
autoClosing	closes brackets, quotes and tags as you type. Default: true.
enableSnippets	offers snippets among the suggestions. Default: true.
readOnly	shows the code without editing it, and still saves it. Default: false.

The field also takes the common field properties, such as disabled and stretch.