Code inputs

Last modified: April 3rd, 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.

Code editor input for blocks of code or mono-space plain text.

Code inputs are shown for inputs configured with the type code, or for input keys matching:

  • code_block
  • *_code_block
Screenshot of a code block
Screenshot of a code block with Ruby syntax highlighting
Naming convention
copied
code_block: |
  Some content is better in monospace.

  1 + 1 = 2
  2 + 2 = 4
example_ruby_code_block: |
  def say_hello
    puts 'Hi there!'
  end

  say_hello
Naming convention
copied
{
  "code_block": "Some content is better in monospace.\n\n1 + 1 = 2\n2 + 2 = 4\n",
  "example_ruby_code_block": "def say_hello\n  puts 'Hi there!'\nend\n\nsay_hello\n"
}
Naming convention
copied
code_block = """
Some content is better in monospace.

1 + 1 = 2
2 + 2 = 4
"""
example_ruby_code_block = """
def say_hello
  puts 'Hi there!'
end

say_hello
"""
Input configuration
copied
snippet: echo hello
_inputs:
  snippet:
    type: code
Input configuration
copied
{
  "snippet": "echo hello",
  "_inputs": {
    "snippet": {
      "type": "code"
    }
  }
}
Input configuration
copied
snippet = "echo hello"

[_inputs.snippet]
type = "code"

Options#

Code input options are configured with options inside an _inputs entry.

Input configuration
copied
snippet: echo hello
_inputs:
  snippet:
    type: code
    options:
      tab_size: 4
      theme: solarized_dark
      syntax: sh
      show_gutter: false
Input configuration
copied
{
  "snippet": "echo hello",
  "_inputs": {
    "snippet": {
      "type": "code",
      "options": {
        "tab_size": 4,
        "theme": "solarized_dark",
        "syntax": "sh",
        "show_gutter": false
      }
    }
  }
}
Input configuration
copied
snippet = "echo hello"

[_inputs.snippet]
type = "code"

  [_inputs.snippet.options]
  tab_size = 4
  theme = "solarized_dark"
  syntax = "sh"
  show_gutter = false

Code inputs have the following options available:

max_visible_lines - Integer#

Sets the maximum number of visible lines for this input, effectively controlling maximum height. When the containing text exceeds this number, the input becomes a scroll area. Defaults to 30.

min_visible_lines - Integer#

Sets the minimum number of visible lines for this input, effectively controlling initial height. When the containing text exceeds this number, the input grows line by line to the lines defined by max_visible_lines. Defaults to 10.

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. Only used if syntax is set. 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.

syntax - String#

Changes how the editor parses your content for syntax highlighting. Should be set to the language of the code going into the input. Optional, has no default. 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 as well, syntax is assumed to be the section preceding the normalized _code_block suffix (e.g. my_javascript_code_block for javascript, or rubyCodeBlock for ruby).

empty_type - string#

Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can 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.

Valid values#

Documented below are the valid formats for code inputs.

The lists of examples are non-exhaustive.

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"

Related Articles

Open in a new tab