###One of the most populair plug-ins for Kirby is the Visual Markdown Editor.
It allows you to enter plain-text and you can style it (both with markdown-codes and shortcuts / visual).
When you enter a Kirby-tag, that tag is surrounded by red brackets ( ), so you can see that this is not normal text, but “some code with variables”.
The image above shows the original styling of these Kirby-tags, and I decided to make them even more different from the default text, in order to help my clients to understand them;
All this is done without altering the original plug-in and it’s 100% CSS.
Simly enter the Kirby-tag the way you were used to, something like;
(image:myimage.png class:myclass)
And the CSS (see below) will format this code like the one above.
###If you want the same look-and-feel for Kirby-tags in the editor, follow these steps;
1. Download Visual Markdown Editor, if you’ve not done already.
2. Add this line of code to your site\config\config.php
c::set('panel.stylesheet', 'assets/css/panel.css');
Doing so, the asset “panel.css” will automatically be loaded in your control-panel (when the file does not exist, create it first).
3. Open panel.css (or create it first) and place these codes in the style-sheet;
/* fine-tune markdown-editor */
.cm-s-visualmarkdown .cm-kirbytext-attribute {
font-weight: bold;
color: #fff;
background: #999;
padding: 0 3px 2px 3px;
border-radius: 4px;
margin: 0 5px 0 5px;
}
.cm-s-visualmarkdown .cm-kirbytext-open,
.cm-s-visualmarkdown .cm-kirbytext-close {
font-weight: 900;
padding: 0 .1em 0 .15em;
}
.cm-s-visualmarkdown .cm-kirbytext-close {
padding: 0 0 0 .25em;
}
span.cm-kirbytext-open:before {
content: "\f121";
font-family: "FontAwesome";
color: #999;
font-weight: normal;
margin: 0 5px;
font-size: 125%;
}
.cm-s-visualmarkdown .cm-kirbytext-value {
color: #777;
}
###Tip of the day;
If you don’t like the #-icon for the Kirby-tags, simply change the content-tag in the style-sheet to another one.
You can look up all available icons here.
