A Code input is an editing interface for code or mono-spaced plain text content. By configuring your inputs, you can customize the appearance and functionality for a better editing experience.
These instructions assume that you know where in the configuration cascadeyou want to configure your input. For more information, please read our documentation on Code inputs, inputs in general, and the configuration cascade.
To configure a Code input:
- Open your website files in your local development environment, or log in to CloudCannon and select the Site for which you want to configure your input.
- Navigate to the location in the configuration cascade where you want to configure your input. This can be the root of your CloudCannon Configuration File, within the
collections_config.*
key in your CloudCannon Configuration File, a Schema file, a markup file, or any where you configure a Structure. - Identify the
_inputs
key, or create one at that level of the configuration cascade. - Add an input name key for your input under the
_inputs
key (a.k.a.,_inputs.*
). We recommend naming your input something simple that indicates the function or context. - Add the
type
key under your input name key, with the valuecode
. - (Optional.) Add any other general configuration keys (e.g.,
label
,comment
,context
) under your input name key. - (Optional.) Add any specific configuration keys under
_inputs.*.options
(e.g.,syntax
,theme
,show_gutter
).
CloudCannon will now apply this input configuration to all markup files that use your input name key, without needing to save your configuration. This allows you to make changes to your input configuration and see those changes affect inputs live.
When you are happy with your input configuration, you must save your input configuration.
_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.
{
"_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.
When you add your input key name to a data or markup file, your configured Code input will appear in the Data Editor, Visual Editor, or Content Editor.
example_ruby: |
def say_hello
puts 'Hi there!'
end
say_hello
Input configuration options#
General configuration options are available for all input types. You can define the label, comment, and context box for your Code input, whether it is hidden or disabled, and how CloudCannon should handle configuration at multiple levels of the configuration cascade.
Specific configuration options for Code inputs include defining the height of the code area, tab size, theme color, gutter visibility, syntax highlighting, and how CloudCannon handles empty values. You can also add input validation to require a value, specify the minimum and maximum value length, or match a regular expression.
Here is an example of a Code input using some of the most commonly used configuration keys.
_inputs:
example_ruby:
type: code
label: Example Ruby Code
comment: Enter the example code for the feature
options:
max_visible_lines: 25
min_visible_lines: 15
show_gutter: false
syntax: ruby
theme: darcula
required: true
{
"_inputs": {
"example_ruby": {
"type": "code",
"label": "Example Ruby Code",
"comment": "Enter the example code for the feature",
"options": {
"max_visible_lines": 25,
"min_visible_lines": 15,
"show_gutter": false,
"syntax": "ruby",
"theme": "darcula",
"required": true
}
}
}
}
For a complete list of configuration keys available for inputs please read our inputs reference documentation.
These keys configure the appearance and functionality of Code inputs in CloudCannon.
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
.
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
.
This key toggles the line numbers and code-folding controls. Defaults to true
.
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
).
This key defines how many spaces each line is auto indented by, and how many spaces a tab is shown as. Defaults to 2
.
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
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.
This key toggles whether CloudCannon requires this Input to have a value. If set to true
, CloudCannon will require you to enter a value to save your changes, or discard your unsaved changes.
By default, this key is false
(i.e, CloudCannon does not require this Input to have a value).
This key is available for Array, Boolean, Code, Color, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.
Show exampleHide example
In this example, we want to require our team to enter an author
value for markup files with this Input.
_inputs:
author:
type: text
comment: Enter the name of the author for this blog post.
options:
required: true
{
"_inputs": {
"author": {
"type": "text",
"comment": "Enter the name of the author for this blog post.",
"options": {
"required": true
}
}
}
}
This key defines the maximum string length, in characters, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too long. If the Input already contains a longer value, CloudCannon will require you to remove characters until the Input contains a valid string to save your changes, or discard your unsaved changes.
Value can be any non-negative integer. If this key is set to 0
, CloudCannon requires the Input to be empty. If options.min_length
is also configured, this key cannot be a smaller number.
This key has no default.
This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs. To use this key in a Select Input, allow_create
must be set to true
.
Show exampleHide example
In this example, we want our team to enter a blog description using the Rich Text seo_description
Input. This Input limits you to a maximum of 125 characters.
_inputs:
seo_description:
type: markdown
comment: Enter a brief description of this blog.
options:
max_length: 125
min_length: 25
{
"_inputs": {
"seo_description": {
"type": "markdown",
"comment": "Enter a brief description of this blog.",
"options": {
"max_length": 125,
"min_length": 25
}
}
}
}
This key defines the minimum string length, in characters, that CloudCannon will allow in an Input. When configured, CloudCannon will warn you when an Input value is too short. If the Input already contains a shorter value, CloudCannon will require you to add characters until the Input contains a valid string to save your changes, or discard your unsaved changes.
Value can be any positive integer. If options.max_length
is also configured, this key cannot be a greater number.
This key has no default.
This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs. To use this key in a Select Input, allow_create
must be set to true
.
Show exampleHide example
In this example, we want our team to enter a blog description using the Rich Text seo_description
Input. This Input requires a minimum of 25 characters.
_inputs:
seo_description:
type: markdown
comment: Enter a brief description of this blog.
options:
max_length: 125
min_length: 25
{
"_inputs": {
"seo_description": {
"type": "markdown",
"comment": "Enter a brief description of this blog.",
"options": {
"max_length": 125,
"min_length": 25
}
}
}
}
This key defines a regular expression that the Input value must match. When configured, CloudCannon will require you to enter a value that matches the REGEX pattern. If the Input already contains an invalid value, CloudCannon will require you to enter a valid string to save your changes, or discard your unsaved changes.
Value must be a valid REGEX string.
This key has no default.
This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs. To use this key in a Select Input, allow_create
must be set to true
.
Show exampleHide example
In this example, we want our team to add an email address to the contact_email
Input using the correct email format.
_inputs:
contact_email:
type: email
options:
pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
pattern_message: Please use the format ___@___.__
{
"_inputs": {
"contact_email": {
"type": "email",
"options": {
"pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
"pattern_message": "Please use the format ___@___.__"
}
}
}
}
This key defines the message that explains which regular expression an Input will accept. This key requires you to define options.pattern
.
This key has no default.
This key is available for Code, Color, File, Select, Text, Rich Text, and URL Inputs.
Show exampleHide example
In this example, we prompt our team to use the correct email format in the contact_email
Input using a pattern message.
_inputs:
contact_email:
type: email
options:
pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
pattern_message: Please use the format ___@___.__
{
"_inputs": {
"contact_email": {
"type": "email",
"options": {
"pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
"pattern_message": "Please use the format ___@___.__"
}
}
}
}
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"
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.
---
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.