Code Field

The Code field type provides a code editor with syntax highlighting for various programming languages. It allows users to write and edit code snippets easily within the CMS.

User Interface

Editor

A Lexical-based code editor with syntax highlighting and line numbers.

Breaking change from Netlify/Decap CMS

Sveltia CMS does not support the theme and keymap inline settings, along with support for some languages, as we have moved away from CodeMirror to Lexical. We may add user settings for themes in the future, after migrating from Prism to Shiki for syntax highlighting.

Preview

A read-only view of the code snippet with syntax highlighting.

Data Type

An object with the following structure:

{ "code": "string", "lang": "string" }

The object keys can be customized using the keys option.

If the output_code_only option is set to true, the data type will be a string containing only the code.

Data Validation

• If the required option is set to true, the code must not be an empty string.
• If the pattern option is provided, the code must match the specified regular expression pattern.

Options

In addition to the common field options, the Code field supports the following options:

Required Options

widget

• Type: string
• Default: string

Must be set to code.

Optional Options

Breaking change from Netlify/Decap CMS

Sveltia CMS uses Prism for syntax highlighting. Therefore, the list of supported languages may differ from that of Netlify/Decap CMS, which uses CodeMirror. Also, we’ll migrate from Prism to Shiki before the 1.0 release to follow Lexical’s migration. The list of supported languages may change again after the migration.

This affects the default_language option and the language used in the default option, along with the language selection dropdown in the UI.

default

• Type: object or string
• Default: { code: "", lang: "" }

The default value for the field, where code is a code snippet and lang is any valid programming language supported by Prism.

If output_code_only is true, this should be a string containing the default code.

keys

• Type: object
• Default: { code: "code", lang: "lang" }

An object that defines the keys used in the data object. The default keys are code for the code snippet and lang for the programming language.

If output_code_only is true, this option is ignored.

output_code_only

• Type: boolean
• Default: false

If set to true, the field will store and return only the code as a string, instead of an object containing both code and language.

allow_language_selection

• Type: boolean
• Default: true

If set to false, the language selection dropdown will be hidden, and the language will default to an empty string or the value specified in the default option.

Note for Netlify/Decap CMS users

The Netlify/Decap CMS document says the default value for the allow_language_selection option is false, but it’s actually true. The default value in Sveltia CMS is also true.

default_language

• Type: string
• Default: ""

The default programming language for the code editor. See the list of supported languages on the Prism website for valid values.

Examples

Basic Example

The simplest configuration of a Code field:

YAML

- widget: code
  label: Code Snippet
  name: code_snippet

TOML

[[fields]]
name = "code_snippet"
label = "Code Snippet"
widget = "code"

JSON

{
  "name": "code_snippet",
  "label": "Code Snippet",
  "widget": "code"
}

JavaScript

{
  name: "code_snippet",
  label: "Code Snippet",
  widget: "code",
}

Output example:

YAML

code_snippet:
  code: |
    function greet() {
      console.log("Hello, World!");
    }
  lang: js

TOML

[code_snippet]
code = """function greet() {
  console.log("Hello, World!");
}"""
lang = "js"

JSON

{
  "code_snippet": {
    "code": "function greet() {\n  console.log(\"Hello, World!\");\n}",
    "lang": "js"
  }
}

Code Only Output

This example configures the field to output only the code as a string:

YAML

- widget: code
  label: Code Only
  name: code_only
  output_code_only: true

TOML

[[fields]]
name = "code_only"
label = "Code Only"
widget = "code"
output_code_only = true

JSON

{
  "name": "code_only",
  "label": "Code Only",
  "widget": "code",
  "output_code_only": true
}

JavaScript

{
  name: "code_only",
  label: "Code Only",
  widget: "code",
  output_code_only: true,
}

Output example:

YAML

code_only: |
  function greet() {
    console.log("Hello, World!");
  }

TOML

code_only = """function greet() {
  console.log("Hello, World!");
}"""

JSON

{
  "code_only": "function greet() {\n  console.log(\"Hello, World!\");\n}"
}

Custom Keys and Default Value

This example customizes the keys used in the data object and sets a default value, with language selection disabled:

YAML

- widget: code
  label: Custom Code
  name: custom_code
  allow_language_selection: false
  keys:
    code: source_code
    lang: language
  default:
    source_code: "console.log('Hello, World!');"
    language: js

TOML

[[fields]]
name = "custom_code"
label = "Custom Code"
widget = "code"
allow_language_selection = false
[keys]
code = "source_code"
lang = "language"
[default]
source_code = "console.log('Hello, World!');"
language = "js"

JSON

{
  "name": "custom_code",
  "label": "Custom Code",
  "widget": "code",
  "allow_language_selection": false,
  "keys": {
    "code": "source_code",
    "lang": "language"
  },
  "default": {
    "source_code": "console.log('Hello, World!');",
    "language": "js"
  }
}

JavaScript

{
  name: "custom_code",
  label: "Custom Code",
  widget: "code",
  allow_language_selection: false,
  keys: {
    code: "source_code",
    lang: "language",
  },
  default: {
    source_code: "console.log('Hello, World!');",
    language: "js",
  },
}

Output example:

YAML

custom_code:
  source_code: "console.log('Hello, World!');"
  language: js

TOML

[custom_code]
source_code = "console.log('Hello, World!');"
language = "js"

JSON

{
  "custom_code": {
    "source_code": "console.log('Hello, World!');",
    "language": "js"
  }
}