Adomonition in Jekyll

Admonitions are a great way to draw attention to important information in your blog. They are often used to highlight warnings, tips, notes, and other important information. In this post, I will show you how to add admonitions to your Jekyll blog using html and css based on this blog and this repo.

1. Install

Download admonition.html and put it in your _includes folder. Then, download _admonition.scss and put it in your _sass folder and add the following to your main.scss:

@import "_admonition";

However, in my case, I have to add the folloiwng to css/main.scss instead:

@import
        "normalize",
        "base",
        "layout",
        "color",
        "admonition"
;

Finally, download the icons from the repo and put them in your assets/img/icons folder. And that’s it! You are all set!

2. Using the plugin

To add an interactive tweet to your blog, simply put the following to the body of your blog post:

{% include admonition.html type="note" title="Info" body="This is information intended to draw attention." %}

The list of admonitions types that you can use are:

note