Skip to content
Looking for every option?See the full API reference →

Code ​

The Code field provides a CodeMirror editor for source code and structured text, with syntax highlighting and line numbers. It is hidden on the Index view and read-only on Show.

ruby
# app/avo/resources/user.rb
field :custom_css, as: :code, language: "css"

Without extra configuration, the editor highlights JavaScript, uses the default theme in light mode and Monokai in dark mode, and displays a collapsed preview on Show.

An Avo edit-form card containing a code field: a CodeMirror editor in the dracula dark theme with line-number gutter, showing syntax-highlighted CSS (a .user-card rule with display, padding, border-radius and background properties).

Highlight the right language ​

Set language to match the stored code. The example above highlights CSS; the reference lists all bundled language modes.

Choose the editor colors ​

Use theme to select the light-mode colors. Avo bundles default and monokai; other theme names need their own styles. Dark mode always uses monokai.

ruby
# app/avo/resources/user.rb
field :custom_css, as: :code, language: "css", theme: "monokai"

Display more code on Show ​

Set always_show to keep the content expanded rather than showing a short, faded preview with a More content link. Use height to set the editor height on Show.

ruby
# app/avo/resources/user.rb
field :custom_css, as: :code, language: "css", always_show: true, height: "250px"

On Edit and New, the editor uses a resizable viewport instead. Its height comes from the viewport default or the user's last resized height, not height.

Control indentation ​

For tab-indented code, enable indent_with_tabs and set tab_size to the desired tab width.

ruby
# app/avo/resources/user.rb
field :custom_css, as: :code, language: "css", indent_with_tabs: true, tab_size: 4

Line wrapping

Lines wrap by default. Although the field accepts line_wrapping, passing false currently still enables wrapping.

Edit a JSON column ​

Enable pretty_generated for a JSON column to display indented JSON and parse the edited text back to a JSON value on save.

ruby
# app/avo/resources/user.rb
field :metadata, as: :code, language: "javascript", pretty_generated: true

Custom format_using and update_using callbacks take precedence over these JSON defaults. See shared field options for formatting, saving, visibility, and other common behavior.