Fork me on GitHub

Premonition is a Jekyll plugin that can transform Markdown blockquotes into styled blocks of code. The default template and stylesheet focuses on creating info boxes, but through the templating system you can modify it to suit your needs.With version 4 we also introduced a new citation box.

Read the documentation to get started.

Examples

Citation (New in version 4)

 > citation "-- Mark Twain" [ cite = "twain" ]
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

-- Mark Twain

Note with title

 > note "My note"
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

My note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Note without title

 > note ""
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Info box

 > info "The information header"
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

The information header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Warning box

 > warning "The information header"
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

The information header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Error box

 > error "The information header"
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

The information header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Custom box

 > custom "A custom box with a Font Awesome icon"
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
 > ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
 > Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

A custom box with a Font Awesome icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Error box with Markdown

 > error "The information header"
 > [Premonition](https://github.com/lazee/premonition) allows you to add
 >
 > * Lists
 > * like this
 >
 > Use *formatting* and add code blocks.
 >
 > ~~~~
 > Isn't that sweet?
 > ~~~~~
 > Anything you can do in Markdown, you can do here. Expect from embeds Premonition boxes ;)

The information header

Premonition allows you to add

  • Lists
  • like this

Use formatting and add code blocks.

Isn't that sweet?

Anything you can do in Markdown, you can do here.

Post excerpts

Premonition also works within post excerpts. This is rendered from the 2020-03-02-blog-post.md post file in the source code of this demo site:

Welcome to Premonition!

The information header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

---
layout: post
title:  "Welcome to Premonition!"
excerpt_separator: <!--more-->
---

> info "The information header"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.
> Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

<!--more-->

## Not in excerpt

Hopefully

Linked

This is a reference link.

> info "Linked"
> This is a [reference link][example].

[example]: https://www.example.com/ "dd"

Render error

If an unknown type is used, this error will appear:

PREMONITION ERROR: Invalid box type

You have specified an invalid box type "foo". You can customize your own box types in `_config.yml`. See documentation for more help.
> foo "Linked"
> Unknown type

Collection support

Premonition now have support for Collections, thanks to Bill Siever.

Example of Premonition within a collection file (See source code for example):

First Contributor - Developer

Some general info, lead by an info box.

Demo box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.

Second Contributor - Developer

Some general info, lead by an info box.

Demo box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. Aenean id augue ante. Duis ut mi faucibus, pellentesque sem quis, gravida nisi. Nam cursus.