Visual markdown editor panel extension


Great to see this project evolving fast! I’m testing it right now, and I may use it on a client project that launches in a couple weeks.
I just sent a pull request with a French translation. I noticed some strings don’t seem to appear anywhere in the interface yet, like action.tooltip.kirbytextLink.


Thanks so much for this awesome plugin! It’s so much easier for clients to understand this whole markdown thing.

I’ve used it for the first client website recently. And it’s just great!
One issue though:

Inserting HTML tags screws up the formatting. Two screenshots:

Here I wanted to insert a break in the middle of the headline. The rest of the headline won’t be highlighted then though.

Here I inserted some “sup”-elements. This screws up the bold and italic elements that follow.

Any suggestions?



I can’t seem to see the pull request. Are you sure it made it’s way through?

Also, all the action.tooltip strings are all used as toolbar icon tooltips. Just place your mouse over one of the icons for a while and it will eventually pop up.


Duh, I indeed fumbled and sent a PR to myself :blush: You should see the PR now.

Re/ the text strings, I hadn’t noticed there were tooltips on Help menu items, it’s quite unusual. So, everything’s fine and the French translation is still correct. Thanks!


Got it. Thanks a lot! :grinning:


Loving the new beta. A huge thank-you for being so responsive! :smiley:


Hey guys,

I just tagged the finished 1.2.0 release. It has some great improvements that I’m really exited about! I hope you like them, too! :grinning:

Background: The CodeMirror overlay (MirrorMark) that I used for the first version has been removed, the plugin now uses completely custom and much more flexible code for all it’s features. This allows for a lot more awesome things to come.

As always, you can check out the extension and it’s documentation on Github.

Here’s what’s new since the last stable version:


  • Enhanced syntax styling
    • Align headline formatting outside the content
    • Added hanging quotes
    • Added styles for task lists
  • Added inline HTML support
  • Added “Help” toolbar section with relevant links
  • Added tooltips to toolbar icons
  • Added translation support
  • Included language files:
    • English
    • German
    • French (Thanks to @Malvese )


  • Changed header button icons
  • Header buttons toggle formatting instead of applying it multiple times
  • Drop MirrorMark dependency
  • Drop lodash.js dependency


  • Don’t treat underscores in words as formatting

  • Make toolbar buttons work with multiple selections

  • Enable panel “Save” hotkey

  • Hide fullscreen icon in Safari

  • A lot more little fixes


Hey everybody

A big thanks to Jonas for his plugin. But it doesn’t work for me.
I put the files in the /site/fields/markdown and change in blueprints like this :

label: Text
type: markdown

And I have nothing. Just the same interface that a type: text

How I can find what’s going wrong ?


Hi @Michalix,

I’m not sure what’s going wrong for you.

Did you double check that the field plugin is in the correct path? Are you using Kirby 2 or the 2.1 beta?

Do you have your websites code available on GitHub or anything else so I could have a look? If not, feel free to send me a PM with your project files so I can try to find the issue.

Cheers, Jonas


Thanks for your answer !

I send you a PM on twitter with the link of my website code.


@Michalix Just send you a personal forum message with a solution.


@DieserJonas Thanks a lot ! It’s working now :slight_smile:
Great plugin. I love it.


Thanks a lot! :blush:


I guess I completely forgot to promote the 1.3.0 update here on the forums. Here’s what’s new:


  • Added Kirbytext highlighting
  • Added option to turn off individual toolbar icons


  • Updated to CodeMirror 5.2
  • Switched to compressed CodeMirror resources


  • Fixed some potentially unsafe javascript code

Also, if you want to support further development of this plugin, you may now purchase a completely optional moral license. This allows me to dedicate more time on creating even additional nice features in the future.


Since the last post announcing 1.3.0 I pushed out another two smaller updates.

Here’s what’s new in 1.3.1 and 1.3.2:


  • Respect the new (Kirby 2.1) strict markdown mode
  • New keyboard shortcuts modal
  • Added support for strike-through text


  • Better keyboard shortcuts
  • Updated to CodeMirror 5.3


  • Better space character matching inside highlighted Kirbytags

Special Thanks:

@shoesforindustry for bringing the “strict markdown mode” to my attention

As always, check it out on GitHub!


I just pushed out yet another small update to Visual Markdown Editor:


  • Added Norwegian, Swedish & Danish languages (thanks to tnViking)
  • Added Dutch language (thanks to TECHMAUS)
  • Added „Email Link“ toolbar item


  • Updated French language (thanks to malvese)


  • Added tooltip for „Italic“ toolbar item
  • Required: true blueprint setting works as expected


What nearly all of my customers need is Text-Colors! :tired_face:

Is there a way to add a color picker to this editor (not for a complete textarea, just for some Words within)?


It might be a little hacky but I found a way that works.

Visual markdown editor panel extension

I started by extending Kirby text to include these new color functions:

(red: content)
(orange: content)
(yellow: content) 
(blue: content)
(green: content)
(purple: content)

To do this I created these files:


The Kirby tag files each look something like this:

kirbytext::$tags['red'] = array(
  'html' => function($tag) {
    return '<span class="red">' . $tag->attr('red') . '</span>';

Each renders out a block of HTML like this:

<span class="red">content</span>

Then I added buttons into the editor

I added this block on line 114 of visualmarkdowneditor.js (right after the bold function)

// site/fields/markdown/assets/js/visualmarkdowneditor.js 

        red: function () {
            self.toggleAround('(red:', ')');
        orange: function () {
            self.toggleAround('(orange:', ')');
        yellow: function () {
            self.toggleAround('(yellow:', ')');
        green: function () {
            self.toggleAround('(green:', ')');
        blue: function () {
            self.toggleAround('(blue:', ')');
        purple: function () {
            self.toggleAround('(purple:', ')');

Then in markdown.php I added these lines after bold on line 80

// site/fields/markdown/markdown.php

and AGAIN on line 133

// site/fields/markdown/markdown.php

Then I updated kirbytags-mode.js

// site/fields/markdown/assets/js/kirbytags-mode.js
// You can just replace the entire attribute block with this new one

        attribute: [
            // Match a Red tag attributes
                regex: /red+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute red',
                next: 'value'
            // Match a Orange tag attributes
                regex: /orange+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute orange',
                next: 'value'
            // Match a Yellow tag attributes
                regex: /yellow+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute yellow',
                next: 'value'
            // Match a Green tag attributes
                regex: /green+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute green',
                next: 'value'
            // Match a Blue tag attributes
                regex: /blue+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute blue',
                next: 'value'
            // Match a Purple tag attributes
                regex: /purple+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute purple',
                next: 'value'
            // Match a Kirbytext tags attributes
                regex: /[a-z0-9]+: ?(?!\/\/)/i,
                token: 'kirbytext-attribute',
                next: 'value'
            // Match a Kirbytext tags closing bracket
                regex: /\)/,
                token: 'kirbytext-close',
                next: 'start'

Finally I added this block to the very end of visualmarkdown.css

// site/fields/markdown/assets/css/visualmarkdown.css

.visualmarkdown-action-red a.fa:before{
    color: red;
.visualmarkdown-action-orange a.fa:before{
    color: orange;
.visualmarkdown-action-yellow a.fa:before{
    color: gold;
.visualmarkdown-action-green a.fa:before{
    color: green;
.visualmarkdown-action-blue a.fa:before{
    color: blue;
.visualmarkdown-action-purple a.fa:before{
    color: purple;






Don’t forget to add color classes to the CSS for the front end of your site

// site/assets/css/*yourstylesheet.css*
  color: red;

  color: orange;

// I'd recommend using a darker yellow color for yellow text. (Maybe even darker than this)
  color: gold;

  color: green;

  color: blue;

  color: purple;

Wow… I didn’t realize how many modification I made to get this working!

Hope that helps somebody!


Is there any plugin that create these buttons without compromise source code? I’m unable to find one in the forum!


What buttons are you referring to? What do you mean by “without compromising source code”?