Introducing the Source Editor

Last modified: March 13th, 2023

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 editor-level team members 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.js

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.