Code Fieldtype

What are you doing writing code in a browser?! Just kidding, it's fine. We made it easy, flexible, and pretty too. We use this fieldtype a lot.

code.png Fieldtype UI
Behold! The Code Fieldtype!

Overview

If your content involves code snippets, this is the fieldtype for you. It’s a CodeMirror field with 25 of the most common languages ready for highlighting, handles tabs and spaces, has a dark mode, and best of all — for you super nerds out there — a vim key binding.

Data Structure

The code fieldtype stores a string. Do whatever you’d like with it.

code: |
  <?php

  public function engage()
  {
    return "Make it so.";
  }

Templating

You can output that string just as it is. If it is indeed code (and why wouldn’t it be?), you’ll probably want to to wrap it in pre and code tags to display it prettier. If you want code highlighting on your front-end, we recommend hooking up prism.js.

<pre><code>{{ your_code_field }}</code></pre>

Variables

Inside an asset variable’s tag pair you’ll have access to the following variables.

Variable Description
key The zero-index count of the current item
value The stored value of the checkbox
label The label of the checkbox item from the field config

Config Options

theme string

Choose between light and material (dark) themes. Default: light.

mode string

Set a language for syntax highlighting. Your choices include:

  • clike
  • css
  • diff
  • go
  • haml
  • handlebars
  • htmlmixed
  • less
  • markdown
  • gfm
  • nginx
  • text/x-java
  • javascript
  • jsx
  • text/x-objectivec
  • php
  • python
  • ruby
  • scss
  • shell
  • sql
  • twig
  • vue
  • xml
  • yaml-frontmatter

indent_type string

Choose between tabs and spaces. Choose wisely. Default: tabs.

indent_size integer

Set your preferred indentation size (in spaces). Default: 4.

line_numbers boolean

Show line numbers.

line_wrapping boolean

Enable to wrap long lines of code instead of showing a horizontal scroll. Default: true.

key_map string

Pick your preferred set of keyboard shortcuts. Choose between default, sublime, and vim. We'll let you guess which one is default.

Betterify this page on Github!