jekyll-callout

A Jekyll plugin that provides a {% callout %} Liquid block tag for styled callout and admonition blocks. Content inside the block renders as Markdown.

Add to your Gemfile:

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

Add to your _config.yml:

plugins:
  - jekyll-callout

Then run:

bundle install

Basic callout:

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

With a custom title:

{% callout warning "Before You Deploy" %}
Make sure you've run the full test suite.
{% endcallout %}

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

{% callout note %}...{% endcallout %}
{% callout tip %}...{% endcallout %}
{% callout warning %}...{% endcallout %}
{% callout danger %}...{% endcallout %}
{% callout info %}...{% endcallout %}

Omitting the type defaults to note.

<div class="callout callout--warning">
  <div class="callout__title">Warning</div>
  <div class="callout__body">
    <p>Make sure you've run the full test suite.</p>
  </div>
</div>

The plugin outputs unstyled BEM-classed markup. Add your own CSS. Here's a minimal starting point:

.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;
}

.callout__body > *:last-child {
  margin-bottom: 0;
}

No styles are injected by the plugin — all visual design belongs in your site's CSS.

This plugin is compatible with Jekyll sites deployed to GitHub Pages when the site is built through a custom GitHub Actions workflow.

It is not compatible with the default GitHub Pages safe-mode build, which does not load custom plugins.

MIT — see LICENSE.txt.