Visual Markdown - slight enhancement

###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.

1 Like

Almost a year ago I also suggested a few style tweaks. One of them was making the values look like text fields :slight_smile:
I like yours, but in my opinion every character we type should remain visible. Typing a parenthesis and seing it become a dash seems rather confusing.

You are absolutely right; I changed the CSS-code to math the keyboard-input.

See screenshot of the new styling…

I wanted to use an icon for the code-wrapper, so it’s more clear this is not plain-text.

But FontAwesome doesn’t have () icons, so I decided to use <> icons instead…

2 Likes

- update -

##What You Type Is What You Get…

But but… # is for headings. Doesn’t it look like an H1?

The # is placed in a pseudo-tag; it’s not real text, but only visible in the ::before syntax.

Which “icon” (from FontAwesome) is the best, you think?

Maybe the </> icon?


- edit -

Definitely the </> icon… :slight_smile:

IMO, this is too much and makes the text rather difficult to read. Isn’t it enough that the parenthesis are highlighted in red? I would really prefer the original version.

2 Likes

What happens to the icon, when an inline Kirbytag is used?

Maybe, a more subtle way to highlight the tags could be a very light gray background?

This would not interfere with editing, while spearating tags from the regular Markdown code. See example below:

  background: #eee;
  padding: 2px 0 4px 0;
}

.cm-s-visualmarkdown .cm-kirbytext-open,
.cm-s-visualmarkdown .cm-kirbytext-close {
  font-weight: bold;
  color: #f00;
  padding-left: 4px;
  padding-right: 4px;
}

.cm-s-visualmarkdown .cm-kirbytext-attribute {
  font-weight: bold;
  color: #999;
}

.cm-s-visualmarkdown .cm-kirbytext-value {
  color: #555;
}
2 Likes

I like this idea !
Here’s an alternative turning Kirbytag attribute in red and all typographic marking in blue.
Also adding a CSS light-grey opening quotemark on the left of the blockquotes (since the “>” seems not so easy to remember for users).

.cm-s-visualmarkdown .cm-kirbytext-attribute {
  font-weight: bold;
  color: red; 
}
.cm-footnotes-open, .cm-footnotes-close,
.cm-s-visualmarkdown .cm-kirbytext-open,
.cm-s-visualmarkdown .cm-kirbytext-close {
  color:red;
  font-weight: bold;
  font-weight: 900;
  font-size: 1em;
  line-height: 1;
}
.cm-footnotes-attribute{
  color:red; 
  font-weight: bold;
}

.cm-s-visualmarkdown .cm-formatting-quote {color:red; font-style:normal;}
.cm-s-visualmarkdown .cm-formatting-quote:before {
  font-family: "FontAwesome";
  content: "";
  font-size: 92%;
  margin-right: 4px;
  margin-left: 4px;
  color: #d7dcdf;
}
.has-quote {
  padding-left:18px !important;
}
.cm-quote {
  font-style:italic; 
  font-size:120%;
}

.cm-s-visualmarkdown .cm-kirbytext-value, .cm-footnotes-note {
  color: #777;
}

.cm-s-visualmarkdown .cm-formatting,
.cm-s-visualmarkdown .cm-strikethrough,
.cm-s-visualmarkdown .cm-formatting-strikethrough.cm-strikethrough {
 color: #27B0EA;
}


[class*=-open] {
  padding-left:5px; 
  padding-right:1px;
  border-top-left-radius:3px; 
  border-bottom-left-radius:3px;
}

[class*=-close] {
  padding-right:5px; 
  padding-left:1px;
  border-top-right-radius:3px; 
  border-bottom-right-radius:3px;
}

[class*=cm-kirbytext-],
[class*=cm-footnotes-] {
  background: #f4f4f4;
  padding-bottom: 3px;
}