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?
Thanks!
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 
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! 
Loving the new beta. A huge thank-you for being so responsive! 
1 Like
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! 
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:
Features:
- 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 )
Changes:
- Changed header button icons
- Header buttons toggle formatting instead of applying it multiple times
- Drop MirrorMark dependency
- Drop lodash.js dependency
Bugfixes:
-
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
6 Likes
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 :
text:
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 
Great plugin. I love it.
1 Like
Thanks a lot! 
I guess I completely forgot to promote the 1.3.0 update here on the forums. Here’s what’s new:
Features:
- Added Kirbytext highlighting
- Added option to turn off individual toolbar icons
Changes:
- Updated to CodeMirror 5.2
- Switched to compressed CodeMirror resources
Bugfixes:
- 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:
Features:
- Respect the new (Kirby 2.1) strict markdown mode
- New keyboard shortcuts modal
- Added support for strike-through text
Changes:
- Better keyboard shortcuts
- Updated to CodeMirror 5.3
Bugfixes:
- Better space character matching inside highlighted Kirbytags
Special Thanks:
@shoesforindustry for bringing the “strict markdown mode” to my attention
2 Likes
I just pushed out yet another small update to Visual Markdown Editor:
Features:
- Added Norwegian, Swedish & Danish languages (thanks to tnViking)
- Added Dutch language (thanks to TECHMAUS)
- Added „Email Link“ toolbar item
Changes:
- Updated French language (thanks to malvese)
Bugfixes:
- Added tooltip for „Italic“ toolbar item
-
Required: trueblueprint setting works as expected
2 Likes
What nearly all of my customers need is Text-Colors! 
Is there a way to add a color picker to this editor (not for a complete textarea, just for some Words within)?
1 Like
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:
site/tags/red.php
site/tags/orange.php
site/tags/yellow.php
site/tags/green.php
site/tags/blue.php
site/tags/purple.php
The Kirby tag files each look something like this:
<?php
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
'red',
'orange',
'yellow',
'green',
'blue',
'purple',
and AGAIN on line 133
// site/fields/markdown/markdown.php
'red',
'orange',
'yellow',
'green',
'blue',
'purple',
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;
}
.cm-red{
color:red!important;
}
.cm-orange{
color:orange!important;
}
.cm-yellow{
color:gold!important;
}
.cm-green{
color:green!important;
}
.cm-blue{
color:blue!important;
}
.cm-purple{
color:purple!important;
}
Don’t forget to add color classes to the CSS for the front end of your site
// site/assets/css/*yourstylesheet.css*
.red{
color: red;
}
.orange{
color: orange;
}
// I'd recommend using a darker yellow color for yellow text. (Maybe even darker than this)
.yellow{
color: gold;
}
.green{
color: green;
}
.blue{
color: blue;
}
.purple{
color: purple;
}
Wow… I didn’t realize how many modification I made to get this working!
Hope that helps somebody!
4 Likes
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”?