Jekyll Special Blocks
Enhance your Jekyll-based GitHub Pages blog with eye-catching prompt blocks. This quick tutorial shows you how to implement tip, info, warning, and danger callouts using the Chirpy theme's special formatting—making your technical content more engaging and easier to scan for important information.
Overview
If you are using a Jekyll website to create your own GitHub Pages website where your site is hosted on USERNAME.github.io for free, here's an interesting tip for creating blocks of interest that catch your readers eye.
Specifically, this website for example uses chirpy-starter which I learned about from TechnoTim:
The Blocks
Using these technologies, you can create blocks like this:
This is an example of a Tip.
This is an example of an Info block.
This is an example of a Warning block.
This is an example of a Danger block.
With that said, here's how to add each of these in the Markdown of your post page:
1
2
3
4
5
6
7
8
9
10
11
> This is an example of a Tip.
{: .prompt-tip }
> This is an example of an Info block.
{: .prompt-info }
> This is an example of a Warning block.
{: .prompt-warning }
> This is an example of a Danger block.
{: .prompt-danger }