README

Code editor field for Kirby 3, 4 and 5.

Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, you can consider making a donation of your choice.

• 1. Installation
• 2. Setup
• 3. Options
• 4. Available languages
• 5. License
• 6. Credits

1. Installation

Kirby 3, 4: up to 1.0.3. Kirby 5: 1.1.0+.

Download and copy this repository to /site/plugins/code-editor

Alternatively, you can install it with composer: composer require sylvainjule/code-editor

2. Setup

This field adds a code editor in the panel:

editor:
  label: My code editor
  type: code-editor

3. Options

Note that you can make the default height any height you want with some custom panel CSS. First, set the size option to any string you'd like:

size: custom-size

Then in your panel.css:

.k-code-editor-input[data-size="custom-size"] {
    min-height: 15rem;
}

3.1. Default options

You can globally override the default options, instead of setting them on a per-field basis. In your site/config/config.php:

return [
  'sylvainjule.code-editor.language'     => 'css',
  'sylvainjule.code-editor.size'         => 'small',
  'sylvainjule.code-editor.lineNumbers'  => true,
  'sylvainjule.code-editor.tabSize'      => 4,
  'sylvainjule.code-editor.insertSpaces' => true,
  'sylvainjule.code-editor.ignoreTabKey' => false,
];

4. Available languages

Currently supported languages are:

• css
• javascript
• json
• less
• php
• python
• ruby
• scss
• yaml

5. License

MIT

6. Credits

Code editor:

• Vue Prism Editor