PHPackages                             sylvainjule/code-editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. sylvainjule/code-editor

ActiveKirby-plugin[Utility & Helpers](/categories/utility)

sylvainjule/code-editor
=======================

Code editor field for Kirby 3, 4 and 5

1.1.0(11mo ago)377.9k↓43.3%1[2 issues](https://github.com/sylvainjule/kirby-code-editor/issues)MITVue

Since Mar 5Pushed 11mo ago3 watchersCompare

[ Source](https://github.com/sylvainjule/kirby-code-editor)[ Packagist](https://packagist.org/packages/sylvainjule/code-editor)[ RSS](/packages/sylvainjule-code-editor/feed)WikiDiscussions master Synced yesterday

READMEChangelog (5)Dependencies (1)Versions (7)Used By (0)

Kirby – Code editor
===================

[](#kirby--code-editor)

Code editor field for Kirby 3, 4 and 5.

[![screenshot-code-editor](https://user-images.githubusercontent.com/14079751/109679014-7b043800-7b7b-11eb-8c4e-2ae25da8288d.png)](https://user-images.githubusercontent.com/14079751/109679014-7b043800-7b7b-11eb-8c4e-2ae25da8288d.png)

Overview
--------

[](#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](https://paypal.me/sylvainjl).

- [1. Installation](#1-installation)
- [2. Setup](#2-setup)
- [3. Options](#3-options)
- [4. Available languages](#4-available-languages)
- [5. License](#5-license)
- [6. Credits](#6-credits)

1. Installation
---------------

[](#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
--------

[](#2-setup)

This field adds a code editor in the panel:

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

3. Options
----------

[](#3-options)

NameTypeDefaultOptionsDescriptionlanguage`String``'css'`-Syntax mode of the editor. See below for available languagessize`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](https://getkirby.com/docs/reference/system/options/panel#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

[](#31-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
----------------------

[](#4-available-languages)

Currently supported languages are:

- `css`
- `javascript`
- `json`
- `less`
- `php`
- `python`
- `ruby`
- `scss`
- `yaml`

5. License
----------

[](#5-license)

MIT

6. Credits
----------

[](#6-credits)

**Code editor:**

- [Vue Prism Editor](https://github.com/koca/vue-prism-editor)

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance51

Moderate activity, may be stable

Popularity33

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 58.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~403 days

Total

5

Last Release

333d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/14079751?v=4)[Sylvain Julé](/maintainers/sylvainjule)[@sylvainjule](https://github.com/sylvainjule)

---

Top Contributors

[![sylvainjule](https://avatars.githubusercontent.com/u/14079751?v=4)](https://github.com/sylvainjule "sylvainjule (17 commits)")[![bastianallgeier](https://avatars.githubusercontent.com/u/24532?v=4)](https://github.com/bastianallgeier "bastianallgeier (6 commits)")[![johannschopplich](https://avatars.githubusercontent.com/u/27850750?v=4)](https://github.com/johannschopplich "johannschopplich (5 commits)")[![afbora](https://avatars.githubusercontent.com/u/3393422?v=4)](https://github.com/afbora "afbora (1 commits)")

---

Tags

codeeditorhighlighterkirbykirby-plugin

### Embed Badge

![Health badge](/badges/sylvainjule-code-editor/health.svg)

```
[![Health](https://phpackages.com/badges/sylvainjule-code-editor/health.svg)](https://phpackages.com/packages/sylvainjule-code-editor)
```

###  Alternatives

[getkirby/cms

The Kirby core

1.5k584.8k472](/packages/getkirby-cms)[medienbaecker/kirby-modules

Easily add modules to your pages

895.5k1](/packages/medienbaecker-kirby-modules)[distantnative/retour-for-kirby

Manage redirects and track 404s right from the Kirby CMS Panel

14698.5k1](/packages/distantnative-retour-for-kirby)[arnoson/kirby-vite

Vite helper for Kirby CMS

9765.1k3](/packages/arnoson-kirby-vite)[bnomei/kirby3-dotenv

Kirby Plugin for environment variables from .env

4149.6k2](/packages/bnomei-kirby3-dotenv)[medienbaecker/kirby-alter

242.1k](/packages/medienbaecker-kirby-alter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)