The Source Editor

Last modified: May 24th, 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 that is great for making minor changes to the source code of your files. This editing interface is useful for all text-based files.

A screenshot of the Source Editor, an in-browser code editor.

Depending on your site configuration, you may not have access to the Source Editor for all files. An editing interface may not be available because:

Some Permission Groups cannot access the Source Editor (e.g., unavailable to the Editors Default Permission Group or to Clients).

Source Editor features#

The Source Editor displays the raw content of text-based files. Syntax highlighting in the Source Editor is automatically detected based on the file extension.

For more information about the Editing interface navigation and the Context menu at the top of the Source Editor, read our documentation on editing your files.

Appearance and behavior#

You can configure the appearance and behavior of the Source Editor using the source_editor key in your global configuration file.

A screenshot of the Source Editor, with the tab size, gutter, and theme customized.

cloudcannon.config.yaml

copied

source_editor:
  tab_size: 2
  show_gutter: false
  theme: pastel_on_dark

cloudcannon.config.json

copied

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

cloudcannon.config.cjs

copied

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

The Source Editor has the following configuration options available:

tab_size - Integer#

Defines the auto-indentation of each line and how many spaces a tab indentation counts as. Optional. Defaults to 2.

theme - String#

Defines the color theme for syntax highlighting. Optional. Defaults to monokai.

Other option are:

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 the gutter on the left of the editing interface, displaying line numbers and code folding controls. Optional. Defaults to true.