The Source Editor

Last modified: May 9th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

The Source Editor is an in-browser code editor, used to make edits within CloudCannon on any text-based file. It is available to the owner and developers of the site.

Screenshot of source editor with an html file open

Configuring the Source Editor#

The Source Editor is used to edit the raw content of text-based files. Client Sharing users and team members in the Editors Default Permission Group do not have access to it.

Syntax highlighting is automatically detected from the extension of the file you are opening.

Options#

To change the appearance and behavior of the Source Editor, use the source_editor option in your global configuration:

cloudcannon.config.yaml

copied

source_editor:
  tab_size: 2
  show_gutter: false
  theme: dawn

cloudcannon.config.json

copied

{
  "source_editor": {
    "tab_size": 2,
    "show_gutter": false,
    "theme": "dawn"
  }
}

cloudcannon.config.cjs

copied

module.exports = {
  source_editor: {
    tab_size: 2,
    show_gutter: false,
    theme: "dawn"
  }
};

Screenshot of the Source Editor with a custom theme set

The Source Editor has the following options available:

tab_size - Integer#

Defines how many spaces lines are auto indented by, and how many spaces tabs are shown as. Optional, defaults to 2.

theme - String#

Changes the colors scheme for syntax highlighting in the editor. Optional, defaults to monokai. Must be one of:

ambiance chaos chrome clouds clouds_midnight cobalt crimson_editor dawn dracula dreamweaver eclipse github gob gruvbox idle_fingers iplastic katzenmilch kr_theme kuroir merbivore merbivore_soft mono_industrial monokai nord_dark pastel_on_dark solarized_dark solarized_light sqlserver terminal textmate tomorrow tomorrow_night tomorrow_night_blue tomorrow_night_bright tomorrow_night_eighties twilight vibrant_ink xcode

show_gutter - Boolean#

Toggles displaying line numbers and code folding controls in the editor. Optional, defaults to true.