jekyll-callout

jekyll-callout is a Jekyll plugin that lets you add styled callout and admonition blocks to any page with a simple Liquid block tag. Content inside the block renders as Markdown.

Demo

{% callout note %}
This is a **note** with Markdown support.
{% endcallout %}

{% callout warning "Before You Deploy" %}
Check your configuration before pushing.
{% endcallout %}

Why This Exists

Raw HTML <div> blocks in Markdown are verbose and fragile. A clean callout tag is easier to read, easier to maintain, and keeps your content files focused on content.

Source Code

• GitHub: github.com/jchance/jekyll-callout
• RubyGems: rubygems.org/gems/jekyll-callout

Installation

Add to your Gemfile:

gem "jekyll-callout", "~> 0.1"

Add to _config.yml:

plugins:
  - jekyll-callout

Then run bundle install.

Usage

Basic:

{% callout note %}
Your content here with **Markdown** support.
{% endcallout %}

With custom title:

{% callout warning "Heads Up" %}
Something important to know.
{% endcallout %}

Supported types: note, tip, warning, danger, info

Output HTML

<div class="callout callout--warning">
  <div class="callout__title">Warning</div>
  <div class="callout__body">
    <p>Something important to know.</p>
  </div>
</div>

Styling

The plugin outputs unstyled BEM-classed markup — no styles injected. Add to your site’s CSS:

.callout {
  padding: 1rem 1.25rem;
  border-left: 4px solid #ccc;
  margin-bottom: 1.5rem;
  background: #f9f9f9;
}
.callout--note    { border-color: #5b8dee; background: #eef3fd; }
.callout--tip     { border-color: #28a745; background: #eafaf1; }
.callout--warning { border-color: #ffc107; background: #fffbea; }
.callout--danger  { border-color: #dc3545; background: #fdf2f2; }
.callout--info    { border-color: #17a2b8; background: #e8f7f9; }
.callout__title   { font-weight: bold; margin-bottom: 0.4rem; }