Configuring code editors

Change the appearance and behavior of your code blocks to fit your use case and brand.

Configuring code blocks

Configure globally in your site’s configuration or per-file in front matter. Code blocks in data files or front matter can be configured as in the following example:

Configuration
_options:
  code_block:
    tab_size: 2
    show_gutter: false
  javascript_code_block:
    tab_size: 4
    theme: dawn

For two front matter fields called code_block and javascript_code_block, this will produce the corresponding code blocks:

Screenshot of code block editors with different configurations

Configuring the source editor

To change the appearance and behaviour of the Source Editor, use the _source_editor option within your site’s configuration:

_config.yml
_source_editor:
  tab_size: 2
  show_gutter: false
  theme: dawn
Screenshot of source editor with a custom theme set

Configuration Options

The Source Editor and code blocks are configured using the following options:

tab_size - Integer (Optional, defaults to 4)

Controls how many spaces lines are auto indented.

theme - String

Must match one from themes (optional, defaults to monokai).

Controls the appearance of the editor.

show_gutter - Boolean (Optional, defaults to true)

Toggles line numbers and code folding controls.

Editor Themes

Below are all other available themes:

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 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

Was this article helpful? or Suggest an improvement >