Want to have beautiful alerts/hints on your Jekyll pages? Skip to here to read.

Examples

Caution

This is a caution!

Warning

This is a warning!

Tip

This is a tip!

Note

This is a note!

Important

This is important!

Why doesn’t Jekyll already have this?

I wanted to use alerts like the hints on GitBook or alerts on GitHub but the jekyll template I’m using doesn’t support them.

I’d never made a Jekyll plugin before, but there way a good list of simple plugins on the official website that I could use to base mine on: Jekyll: Your First Plugin

At the moment, my plugin is essentially a result of me copy-pasting the html and some css straight from one of the GitHub themes into a file and then writing some ruby to do templating with Liquid.

This means the SVGs are currently embedded into the html, but the css is not. I also have some erroneous tags/classes and probably some very badly-written CSS.

It works though!

If it works, it works. By techindustin

Maybe I’ll try refactoring it. Maybe not.

For now, I’m super happy to finally be able to use these in my blogs.

How to Install

One note here:

I am very new to Jekyll, Sass, Liquid, and all things web (so this code will be quite messy).
If I ever decide to improve on it, changes will be put on my GitHub

Add this plugin to ./_plugins/markdown_alerts.rb:

module Jekyll
  class MarkdownAlertTag < Liquid::Block
    def initialize(tag_name, alert_type, tokens)
      super
      @alert_type = alert_type.strip.downcase
    end

    def render(context)
      content = super
      case @alert_type
      when "note"
        "<div class=\"markdown-alert markdown-alert-note\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-info mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg>Note</p><p dir=\"auto\" class=\"pInfo\">#{content}</p></div>"
      when "tip"
        "<div class=\"markdown-alert markdown-alert-tip\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-tip mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z\"></path></svg>Tip</p><p dir=\"auto\" class=\"pInfo\">#{content}</p></div>"
      when "important"
        "<div class=\"markdown-alert markdown-alert-important\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-important mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path></svg>Important</p><p dir=\"auto\" class=\"pInfo\">#{content}</p></div>"
      when "warning"
        "<div class=\"markdown-alert markdown-alert-warning\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-warning mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path></svg>Warning</p><p dir=\"auto\" class=\"pInfo\">#{content}</p></div>"
      when "caution"
        "<div class=\"markdown-alert markdown-alert-caution\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-caution mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path></svg>Caution</p><p dir=\"auto\" class=\"pInfo\">#{content}</p></div>"
      else
        
      end
    end
  end
end

Liquid::Template.register_tag('alert', Jekyll::MarkdownAlertTag)

Add the following to your *.scss file

  
// -------------------------------------------- //

// copied from view-source:https://github.com/orgs/community/discussions/16925

.markdown-alert {
  margin-bottom: 16px;
  color: inherit;
  // modify to a secondary background color or comment out
  background-color: var(--bg-secondary);
  border-left: 0.3rem solid;
  border-radius: 0.3rem;
  padding:  0.5em;
}

.pInfo {
    margin-top:  -1.1em;
    margin-left: 0.75em;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: bold;
  align-items: center;
  line-height: 1
}

.markdown-alert.markdown-alert-note {
  border-left-color: #539bf5
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: #539bf5
}

.markdown-alert.markdown-alert-important {
  border-left-color: #986ee2;
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: #986ee2;
}

.markdown-alert.markdown-alert-warning {
  border-left-color: #c69026;
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: #c69026;
}

.markdown-alert.markdown-alert-tip {
  border-left-color: #57ab5a;
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: #57ab5a;
}

.markdown-alert.markdown-alert-caution {
  border-left-color: #e5534b;
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: #e5534b;
}

// octicon colors


.octicon {
  color:  inherit;
  padding: 0.75em;
  transform: scale(1.1);
  overflow: visible

}

// generated with https://codepen.io/sosuke/pen/Pjoqqp
// colors taken from https://github.com/orgs/community/discussions/16925

.octicon-info {
  filter: invert(55%) sepia(55%) saturate(2060%) hue-rotate(191deg) brightness(99%) contrast(93%);
}

.octicon-tip {
  filter: invert(58%) sepia(64%) saturate(351%) hue-rotate(73deg) brightness(89%) contrast(90%);
}

.octicon-important {
  filter: invert(67%) sepia(41%) saturate(6791%) hue-rotate(225deg) brightness(92%) contrast(92%);
}

.octicon-caution {
  filter: invert(45%) sepia(68%) saturate(2586%) hue-rotate(333deg) brightness(95%) contrast(88%);
}

.octicon-warning {
  filter: invert(78%) sepia(17%) saturate(5107%) hue-rotate(350deg) brightness(85%) contrast(78%);
}

How to Use

Include alerts in your markdown files as such:

{% alert tip %}
This is a tip!
{% endalert %}

{% alert important %}
This is important!
{% endalert %}

{% alert warning %}
This is a warning!
{% endalert %}

Renders to:

Tip