Post

The October CMS blog plugin from Rainlab is the way to go when you want to write articles with Markdown syntax. But the Markdown set is not so extensive when it comes to colors and bring something under attention of your visitor.

Another Markdown based CMS that is very popular is Grav CMS. This CMS has some nice plugins that would be very useful in October CMS as well. I have spent some effort to port a few plugins to October CMS having very promising results.yello

The plugins mentioned are not published on the October CMS marketplace yet, but you can clone them from Github.

  • Enovision Shortcodes Thunder Plugin is the Enovision plugin based on the Thunderer shortcut parser
  • Enovision Markdown Notices Plugin is a very easy to use plugin to place alerts quickly.

Now I will explain all the colored features within these plugins. Please share some feedback with me and help me to have a final first version available in the October CMS marketplace.

Notices in Markdown the easy way

The idea for this plugin came from the same kind of plugin within Grav CMS a markdown based content management system.

Samples

This is an warning notice

This is an danger notice

This is an info notice

This is an success notice

How it is done

! This is an *warning* notice
!! This is an **danger** notice
!!! This is an info notice
!!!! This is an success notice

Notices, alerts and colors with the Shorcodes Thunder plugin

The Shortcodes Thunder plugin is relying on Bootstrap for the alert shortcode and some shortcodes rely on Fontawesome (version 4 or 5).

Alert sample (Bootstrap 4 required)

Danger Dit is een mooie alert

Warning Alert

Info Alert

Success Alert

Primary Alert

Default Alert

How it is done

[alert type=danger class="super dangerous"]**Danger** Dit is een mooie alert[/alert] 
[alert type=warning]Warning Alert[/alert]
[alert type=info]**Info** Alert[/alert]
[alert type=success]**Success** Alert[/alert]
[alert type=primary]**Primary** Alert[/alert]
[alert type=default]**Default** Alert[/alert]

Notice Sample

Different title

This is the default notice

This is thenotice

Primary

This is the primary notice

This is thenotice

Attention please

This is the warning notice

This is thenotice

Info

This is the info notice

This is thenotice

Success

This is the success notice

This is thenotice

System error

This is the danger notice

This is thenotice

How it is done

[notice type=default t="Different title"]This is the **default** notice[/notice]
[notice type=primary]This is the **primary** notice[/notice]
[notice type=warning t="Attention please"]This is the **warning** notice[/notice]
[notice type=info]This is the **info** notice[/notice]
[notice type=success]This is the **success** notice[/notice]
[notice type=danger t="System error"]This is the **danger** notice[/notice]

Coloring text

Sample

This text contains some red, yellow, green and blue. Finally some orange.

How it is done

This text contains some [color c=red]red[/color], 
[color c=yellow bg=#444 padding=20]yellow[/color], [color c=green]green[/color] 
and [color c=#1291f1]blue[/color]. Finally some [color c=#ff9910]orange[/color].

Highlighting text

Sample

This is a sample of text with here some highlighted text with markdown parsed syntax included. From here it is just plain again.

How it is done

This is a sample of text [mark]with here some **highlighted** text with _markdown_ parsed syntax included[/mark]. 
From here it is just plain again.

Github Links