☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

source_editor

Table of contents

Description:

This key defines the appearance and behavior of the Source Editor.

For more information, please read our documentation on the Source Editor.

Type:
Object
Properties:
show_gutterboolean#

This key toggles the gutter on the left of the editing interface, displaying line numbers and code folding controls.

Defaults to: true

Show examplesHide examples

In this example, CloudCannon will show the gutter with line numbers in the Source Editor.

Copied to clipboard
source_editor:
  show_gutter: true
{
  "source_editor": {
    "show_gutter": true
  }
}
soft_wrapboolean#

This key toggles whether CloudCannon will enable soft wrapping of code in the Source Editor.

Setting this key to true will enable soft wrapping of code, allowing long lines to wrap to the next line without horizontal scrolling.

Defaults to: false

Show examplesHide examples

In this example, CloudCannon will enable soft wrapping of code in the Source Editor.

Copied to clipboard
source_editor:
  soft_wrap: true
{
  "source_editor": {
    "soft_wrap": true
  }
}
tab_sizenumber#

This key defines the auto-indentation of each line and how many spaces a tab indentation counts as.

Defaults to: 2

Show examplesHide examples

In this example, we have configured the Source Editor to use 2 spaces for tab indentation.

Copied to clipboard
source_editor:
  tab_size: 2
{
  "source_editor": {
    "tab_size": 2
  }
}
themestring#

This key defines the color theme for syntax highlighting.

Defaults to: basic_dark

Allowed values: atomone basic_dark basic_light darcula dracula duotone_dark duotone_light eclipse github_dark github_light and 15 more.

Show examplesHide examples

In this example, we have configured the Source Editor to use the dark theme for syntax highlighting.

Copied to clipboard
source_editor:
  theme: dark
{
  "source_editor": {
    "theme": "dark"
  }
}
Examples:

In this example, we have configured the Source Editor with custom theme, tab size, and gutter settings.

Copied to clipboard
source_editor:
  theme: basic_dark
  tab_size: 2
  show_gutter: true
{
  "source_editor": {
    "theme": "basic_dark",
    "tab_size": 2,
    "show_gutter": true
  }
}
Open in a new tab