Code inputs

A Code input lets your team members write code or mono-spaced plain text in your data files or the front matter of markup files. Code inputs have a code area for your content.

For each input, you can configure the height of the code area, tab size, theme color, gutter visibility, syntax highlighting, and how CloudCannon handles empty values. You can also use the general configuration options available for all inputs.

Code#

The Code input provides an editing interface for code or mono-spaced plain text content.

You can configure a Code input using the type key with the value code. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

cloudcannon.config.yaml

copied

_inputs:
  example_ruby:
    type: code

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Code input is called example_ruby.

The value of the type key determines the input type. This is a code input.

cloudcannon.config.json

copied

{
  "_inputs": {
    "example_ruby": {
      "type": "code"
    }
  }
}

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Code input is called example_ruby.

The value of the type key determines the input type. This is a code input.

Once configured, the Code input will appear in the Data Editor or the Visual or Content Editor sidebar when you add it to a data file or the front matter of a markup file.

data.yml

copied

example_ruby: |
  def say_hello
    puts 'Hi there!'
  end

  say_hello

Options#

You can configure Code inputs using the options key under your input key, inside of _inputs.

cloudcannon.config.yaml

copied

_inputs:
  snippet:
    type: code
    options:
      max_visible_lines: 25
      min_visible_lines: 15
      show_gutter: false
      syntax: sh
      tab_size: 4
      theme: solarized_dark
      empty_type:

cloudcannon.config.json

copied

{
  "_inputs": {
    "snippet": {
      "type": "code",
      "options": {
        "max_visible_lines": 25,
        "min_visible_lines": 15,
        "show_gutter": false,
        "syntax": "sh",
        "tab_size": 4,
        "theme": "solarized_dark",
        "empty_type": null
      }
    }
  }
}

Code inputs have the following options available:

max_visible_lines — Integer#

This key determines the maximum number of visible lines in the code area, controlling maximum height. When content exceeds this number of lines, the input becomes a scroll area. Defaults to 30.

min_visible_lines — Integer#

This key determines the minimum number of visible lines in the code area, controlling initial height. When content exceeds this number of lines, the input expands line by line until it reaches the value of max_visible_lines. Defaults to 10.

show_gutter — Boolean#

This key toggles the line numbers and code-folding controls. Defaults to true.

syntax — String#

This key determines how the input parses your content for syntax highlighting. The value should match the code language. This key has no default.

Value must be one of:

abap abc actionscript ada alda apache_conf apex applescript aql asciidoc asl assembly_x86 autohotkey batchfile c9search c_cpp cirru clojure cobol coffee coldfusion crystal csharp csound_document csound_orchestra csound_score csp css curly d dart diff django dockerfile dot drools edifact eiffel ejs elixir elm erlang forth fortran fsharp fsl ftl gcode gherkin gitignore glsl gobstones golang graphqlschema groovy haml handlebars haskell haskell_cabal haxe hjson html html_elixir html_ruby ini io jack jade java javascript json json5 jsoniq jsp jssm jsx julia kotlin latex less liquid lisp livescript logiql logtalk lsl lua luapage lucene makefile markdown mask matlab maze mediawiki mel mixal mushcode mysql nginx nim nix nsis nunjucks objectivec ocaml pascal perl perl6 pgsql php php_laravel_blade pig plain_text powershell praat prisma prolog properties protobuf puppet python qml r razor rdoc red redshift rhtml rst ruby rust sass scad scala scheme scss sh sjs slim smarty snippets soy_template space sparql sql sqlserver stylus svg swift tcl terraform tex text textile toml tsx turtle twig typescript vala vbscript velocity verilog vhdl visualforce wollok xml xquery yaml zeek

Alternatively, you can configure syntax with the naming convention. syntax is assumed to be the section preceding the normalized _code_block suffix (e.g. my_javascript_code_block for javascript).

tab_size — Integer#

This key defines how many spaces each line is auto indented by, and how many spaces a tab is shown as. Defaults to 2.

theme — String#

This key determines the color scheme for syntax highlighting. This key is only applicable if syntax is also defined. Defaults to monokai.

Value 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

empty_type — string#

This key determines how CloudCannon handles an empty value. This key does not apply to existing empty values.

Value must be one of the following:

string - an empty value for this input will be stored as "".
null - an empty value for this input will be stored as a null value (default). This does not apply to TOML files.

Unconfigured Code inputs#

In some cases, CloudCannon can still detect a Code input even if you have not configured it.

CloudCannon will interpret any unconfigured input with the key name code_block, or that ends in _code_block as a Code input.

about.md

copied

---
code_block: |
  Some content is better in monospace.

  1 + 1 = 2
  2 + 2 = 4
---

This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.

We recommend configuring your inputs for greater control over their functionality and appearance.

Valid values#

Code inputs can have multiple valid values for empty, single-line, and multiline content. Here are some examples of valid values for the key code.

Empty/null value:

code:

Any valid string (quoted or unquoted):

code: ""
code: ''
code: any string
code: "any string"
code: 'any string'

Any valid multiline string:

code: > multiline string
code: >- multiline string
code: >+ multiline string
code: | multiline string
code: |- multiline string
code: |+ multiline string

Any valid string:

code = ""
code = "any string"

Any valid escaped string:

code = ''
code = 'any string (literal)'

Any valid multiline string:

code = """ multiline string"""
code = """\ multiline string (trimmed) \"""
code = ''' literal multiline string'''

Null value:

"code": null

Any valid string:

"code": ""
"code": "any string"

Any valid multiline string:

"code": "multiline \n string"

Code inputs

Code#

Options#

Unconfigured Code inputs#

Valid values#

Related Articles

Using the configuration cascade