sylvainjule/code-editor

Code editor field for Kirby 3 and 4

1.0.3 2024-03-06 18:19 UTC

Requires

• getkirby/composer-installer: ^1.1

MIT

• Sylvain Julé

README

Code editor field for Kirby 3 and 4.

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, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.

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

1. Installation

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

Name	Type	Default	Options	Description
language	String	'css'	-	Syntax mode of the editor. See below for available languages
size	String	'small'	-	Min height of the editor. small / medium / large / huge
lineNumbers	Boolean	true	-	Whether to show line numbers.
tabSize	number	4	-	The number of characters to insert when pressing tab key.
insertSpaces	boolean	true	-	Whether to use spaces for indentation. If you set it to false, you might also want to set tabSize to 1
ignoreTabKey	boolean	false	-	Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using Ctrl+Shift+M (Mac) / Ctrl+M manually when this is false.

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