As default markdown does not provide colorful elements for blog posts, one might need some outside help.

Luckily Jekyll offers some options that can be used. e.g. in Jekyll Doc these are known as alerts.

Basically you add some .html templates to your _include folder and call them with Liquid template language that Jekyll supports

Note (shameless mutated copy from Jekyll Doc)

HTML template

<div markdown="span" style="margin-bottom: 10px; margin-top: 10px; overflow: hidden; color: #31708f; background-color: #d9edf7; border-color: #bce8f1; padding: 15px; border: 1px solid transparent; border-radius: 4px;"><b>Note:</b> </div>

you can also see note.html

How to use in markdown


It looks something like

Note: Nice blue note