---
url: /en/docs/fields/code.md
description: >-
  Write and edit code snippets in Sveltia CMS with language selection and syntax
  highlighting.
---

# 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](https://lexical.dev/)-based code editor with syntax highlighting and line numbers.

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

:::

### Preview

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

## Data Type

An object with the following structure:

```json
{ "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](/en/docs/fields#common-options), the Code field supports the following options:

### Required Options

#### `widget`

* **Type**: `string`
* **Default**: `string`

Must be set to `code`.

### Optional Options

::: warning Breaking change from Netlify/Decap CMS

Sveltia CMS uses [Shiki](https://shiki.style/) for syntax highlighting. Therefore, the list of supported languages differ from that of Netlify/Decap CMS, which uses [CodeMirror](https://codemirror.net/).

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 [Shiki](https://shiki.style/languages). If the [`keys`](#keys) option is set, use its property names instead.

If `output_code_only` is `true`, this should be a string containing the default code. A string is also accepted otherwise, in which case it’s taken as the code with no language.

An object default with a property that isn’t one of the [`keys`](#keys), or an object default with `output_code_only` set to `true`, is reported as a config validation error on the login screen, because the value would otherwise be dropped.

#### `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.

::: tip Note for Netlify/Decap CMS users

The [Netlify/Decap CMS document](https://decapcms.org/docs/widgets/#Code) 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](https://shiki.style/languages) on the Shiki website for valid values.

## Examples

### Basic Example

The simplest configuration of a Code field:

::: code-group

```yaml [YAML]
- widget: code
  label: Code Snippet
  name: code_snippet
```

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

```json [JSON]
{
  "name": "code_snippet",
  "label": "Code Snippet",
  "widget": "code"
}
```

```js [JavaScript]
{
  name: "code_snippet",
  label: "Code Snippet",
  widget: "code",
}
```

:::

Output example:

::: code-group

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

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

```json [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:

::: code-group

```yaml [YAML]
- widget: code
  label: Code Only
  name: code_only
  output_code_only: true
```

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

```json [JSON]
{
  "name": "code_only",
  "label": "Code Only",
  "widget": "code",
  "output_code_only": true
}
```

```js [JavaScript]
{
  name: "code_only",
  label: "Code Only",
  widget: "code",
  output_code_only: true,
}
```

:::

Output example:

::: code-group

```yaml [YAML]
code_only: |
  function greet() {
    console.log("Hello, World!");
  }
```

```toml [TOML]
code_only = """function greet() {
  console.log("Hello, World!");
}"""
```

```json [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:

::: code-group

```yaml [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 [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 [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"
  }
}
```

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

::: code-group

```yaml [YAML]
custom_code:
  source_code: "console.log('Hello, World!');"
  language: js
```

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

```json [JSON]
{
  "custom_code": {
    "source_code": "console.log('Hello, World!');",
    "language": "js"
  }
}
```

:::