Minimal Mistakes Cheat Sheet

August 12, 2021 July 31, 2023 11 minute read see also thread comments

This Cheat Sheet gives a quick overview of the available commands and options for creating content with the Jekyll theme Minimal Mistakes ꜛ by Michael Rose ꜛ. It does not cover default Markdown commands (please refer to the Markdown guide) or the setup of the theme (please refere to the Minimal Mistakes documentation website ꜛ).

kramdown

The theme uses kramdown ꜛ, a library written in Ruby, that renders Markdown for Jekyll websites ꜛ. kramdown allows the usage of block ꜛ and inline ꜛ attributes, which enables custom stylings to standard Markdown commands, e.g.,

Right aligned text.
{: .text-right}

The kramdown magic: What kramdown additionally to the standard Markdown rendering does, is, e.g., to enable the usage of CSS classes defined in the background via a handy command in the foreground. Say, we have the following CSS class defined somewhere:

.green {
  color: green;
}

This class can now be applied via:

This text is rendered in green.
{: .green}

This text is rendered in green.

kramdown commands can include the calls of several CSS style definitions, e.g.:

This text is rendered in green and bold.
{: .green .bold}

This text is rendered in blue and bold.

See more examples, e.g., here ꜛ.

Posts

Add posts in the _posts ꜛ folder by following the naming convention YYYY-MM-DD-name-of-post.extension.

The YAML front matter can include the following date metadata (following the guidelines of strftime):

date:               YYYY-MM-DD HH:mm:S +0000
last_modified_at:   YYYY-MM-DD HH:mm:S +0000

Linking to posts: There is an extra Liquid tag to link to posts: post_url.

Future posts

To create a future post, simply set its date in the YAML front matter into the future. Also, set search: exclude so that the future post is hidden in the search of your website (if you are using Lunr as the search provider). And don’t forget to set future: false in your _config.yml. If you want to view the post in your local built, use the --future flag to build your site.

Fontawesome

Link to fontawesome ꜛ. Usage:

<i class="fab fa-researchgate" aria-hidden="true"></i>

output:

Emojis: As an alternative to fontawesome you can also use Emojis , which are enabled via the Jemoji plugin. Read here how to install the plugin.

Unicode: Another alternative to fontawesome are Unicode letters. Read here how to insert, e.g., some fancy styled Unicode letters on your website.

Images

You can embed images in three different ways:

Via Markdown

You can add kramdown align tags to the default Markdown image inclusion command:

![image-center](/assets/images/pixel_tracker_logo_80p.png){: .align-center}
![image-right](/assets/images/pixel_tracker_logo_80px.png){: .align-right}
![image-left](/assets/images/pixel_tracker_logo_80px.png){: .align-left} You can also place some text right after the image command, and it will nicely wrap around the image.

You can further advance the style settings of your image, .e.g,:

![styled-image](/assets/images/pixel_tracker_logo_80px.png "This is some hover text"){: .align-center style="width: 5%;"}

[![styled-image](/assets/images/pixel_tracker_logo_80px.png "This is some hover text"){: .align-center style="width: 10%;"}](/assets/images/pixel_tracker_logo_80px.png "Title shown in gallery view")
Some custom styled caption with a [_link_](#via-markdown).
{: .align-caption}

styled-image

Some custom styled caption with a link.

Via HTML

Embedding images via HTML code enables the setting of further image properties like the image width or a caption:

<figure style="width: 80px" class="align-center">
  <a href="/assets/images/pixel_tracker_logo_120px.jpg" title="The Pixel Tracker logo" alt="The Pixel Tracker logo">
  <img src="/assets/images/pixel_tracker_logo_120px.jpg" alt=""></a>
  <figcaption>Image caption.</figcaption>
</figure>

You can create galleries by adding more images to the HTML code. Please, note the class assignments half and third that control the gallery grid layout:

<figure class="half">
  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8171-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8171-1v (21. Feb. 2021).jpg"></a>

  <figcaption>Gallery with a two image per row grid.</figcaption>
</figure>

<figure class="third">
  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8156-1v (16. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8156-1v (16. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8171-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8171-1v (21. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8161-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8161-1v (21. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8164-1v (21. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8164-1v (21. Feb. 2021).jpg"></a>

  <a href="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8175-1v (25. Feb. 2021).jpg">
  <img src="/weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8175-1v (25. Feb. 2021).jpg"></a>

  <figcaption>Gallery with a three image per row grid.</figcaption>
</figure>

Gallery with a three image per row grid.

Centered figure captions: Add the line text-align: center; to the figcaption section in _base.css if you prefer centered figure captions.

Via Liquid

You can embed images also via Liquid tags:

---
title: "Title of my page"
date: 2021-08-10
gallery1:
  - url: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg
    image_path: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg
    alt: "placeholder image 1"
    title: "Image 1 title caption"
  - url: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8164-1v (21. Feb. 2021).jpg
    image_path: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8164-1v (21. Feb. 2021).jpg
    alt: "placeholder image 2"
    title: "Image 2 title caption"
gallery2:
  - url: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8175-1v (21. Feb. 2021).jpg
    image_path: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8175-1v (21. Feb. 2021).jpg
    alt: "placeholder image 3"
    title: "Image 3 title caption"
---
{% include gallery id="gallery1" caption="This is a sample gallery with **Markdown support**." %}

{% include gallery id="gallery2"  caption="This is a sample gallery with **Markdown support**." %}

placeholder image 1 — This is a sample gallery with **Markdown support**.

placeholder image 2 — This is a sample gallery with **Markdown support**.

placeholder image 3 — This is a sample gallery with **Markdown support**.

Header and teaser images

---
title: "Title of my page"
date: 2021-08-10
header:
  teaser: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg
  header: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg
  og_image: /weekend_stories_pics/2021/2102_Corona_Fruehling/2102 Corona Fruehling 8170-1v (21. Feb. 2021).jpg
---

The so-called OpenGraph ꜛ image defined in the og_image variable will be used in social media previews, e.g., on Twitter ꜛ or Facebook ꜛ, if no header image is set. If also no og_image is set, the site’s og_image (site.og_image) defined in the _config.yml will be used as a fallback. Read more about in the Minimal Mistakes documentation ꜛ.

Feature images in RSS feeds: The assigned og_image or teaser image also serves as a teaser for posts in your RSS feeds. Read here how to activate RSS or Atom feeds for your Jekyll website. I’ve experienced, that the defined teaser image won’t always show up in online RSS readers. feedly and inoreader use instead the first occurring image within the post; if the post contains no image, both online reader just display a blank placeholder.

You can also define overlay header images:

---
title: "Post with an overlay header image"
date: 2021-08-10
header:
  overlay_image: /weekend_stories_pics/2020/2010_Berlin/2010 Berlin 7578-1v (02. Okt. 2020).jpg
  og_image: /weekend_stories_pics/2020/2010_Berlin/2010 Berlin 7578-1v (02. Okt. 2020).jpg
  caption: "Photo from the series: [**Straying around**](/weekend_stories/2021/2021-03_Stray_around_3/)"
  actions:
    - label: "See More"
      url: /weekend_stories/2021/2021-03_Stray_around_3/
excerpt: "This post has an overlay header image"
tagline: "This is a custom tagline content which overrides the *default* page excerpt."
---

Example post with an overlayed header image.

You can even define a header overlay just filled with a solid color:

---
title: "Layout: Header Overlay with Background Fill"
header:
  overlay_color: "#333"
---

Adding the extra setting overlay_filter: o# adjusts the opacity of the overlay image. Replace the placeholder o# with any opacity value between 0 and 1 (e.g., overlay_filter: 0.5) or use the even more complex parameter rgba(R#, G#, B#, o#) (e.g., overlay_filter: rgba(255, 0, 0, 0.25)).

Example post with an overlayed header image and some overlay filter — Applied overlay filter to the header image (here: overlay_filter: rgba(205, 239, 154, 0.30)).

---
title: "Post with an overlay header image and some overlay filter"
date: 2021-08-10
header:
  overlay_image: /weekend_stories_pics/2020/2010_Berlin/2010 Berlin 7578-1v (02. Okt. 2020).jpg
  overlay_filter: rgba(205, 239, 154, 0.30)
---

Videos

You can embed videos both in the header as well as within your pages’ content. The following parameters are required for the embedding:

Parameter	Description
`id`	ID of the video
`provider`	Hosting provider of the video (`youtube`, `vimeo` or `google-drive`)

For example, the YouTube video with the url https://www.youtube.com/watch?v=XsxDH4HcOWA (short url: https://youtu.be/XsxDH4HcOWA) can be embeded via:

{% include video id="XsxDH4HcOWA" provider="youtube" %}

a Vimeo video, e.g., https://vimeo.com/212731897, via:

{% include video id="212731897" provider="vimeo" %}

and a video from Google Drive, e.g.,

https://drive.google.com/file/d/1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO/preview

via:

{% include video id="1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO" provider="google-drive" %}

To embed a video in the header of a page add the following commands to its YAML front matter:

---
title: Post with a video header
header:
  video:
    id: 212731897
    provider: vimeo
---

Text alignment and styling

Besides the default Markdown text alignment commands, you can also use the following kramdown tags:

Left aligned test.
{: style="text-align: left;"}  

Center aligned text.
{: style="text-align: center;"}

Right aligned test.
{: style="text-align: right;"}

Justified aligned test.
{: style="text-align: justify;"}

You can further advance the text styling by expanding the kramdown tag, e.g.:

**Some custom styled text with a [_link_](#text-alignment-and-styling).**
{: style="text-align: center; font-size:1.75em; color: #f78c6c;"}

This is *red*{: style="color: red"}.

Some custom styled text with a link.

This is red.

Footnotes

If your page contains footnotes, they will be placed at the end of your page by default. To place the footnotes anywhere else on your page, create an ordered or unordered list and add the kramdown tag {:footnotes} to it:

test1[^1]
[^1]: Test 1

{:footnotes}
* 

test2[^2]
[^2]: Test 2

test1¹

Test 1 ↩
Test 2 ↩

test2²

In-text anchors

In addition to the default Markdown in-text anchor definition syntax you can use:

Text with a [text anchor](#myid1).
{: #myid1}

Text with a [text anchor](#myid2) and a title. 
{:title="The blockquote title"}
{: #myid2}

Text with a text anchor.

Text with a text anchor and a title.

Definition lists

Definition term 1
: Description of term 1

Definition term 2
Definition term 3
: Description of term 3
: Another Description tio term 3

Definition term 1: Description of term 1
Definition term 2
Definition term 3: Description of term 3; Another Description tio term 3

Notice boxes

To create notice boxes, simply attach the kramdown tag {: .notice} to your paragraph:

**Notice:** This is an important info notice.
{: .notice}

Available notice box types
`{: .notice}`
`{: .notice--primary}`
`{: .notice--info}`
`{: .notice--warning}`
`{: .notice--danger}`
`{: .notice--success}`

Notice: This is an important info notice.

Primary Notice: This is an important info notice.

Info Notice: This is an important info notice.

Warning Notice: This is an important info notice.

Danger Notice: This is an important info notice.

Success Notice: This is an important info notice.

To wrap several paragraphs or other elements, use the following Liquid and HTML commands:

{% capture notice-2 %}
**Extended notice box**:
* You can include lists
* and even fenced code blocks:

```html
<html>
  <body>Some body.<body>
</html>
```
{% endcapture %}

<div class="notice">{{ notice-2 | markdownify }}</div>

Extended notice box:

You can include lists
and even fenced code blocks:

<html>
  <body>Some body.<body>
</html>

You can also apply the following HTML-only solution:

<div class="notice--primary" markdown="1">
**Primary Notice with code block:** Some Text...
<p>Some more text....</p>

```html
<html>
  <body>Some body.<body>
</html>
```
</div>

Primary Notice with code block: Some Text…

Some more text....

<html>
  <body>Some body.<body>
</html>

Buttons

Add buttons by using the kramdown tag {: .btn} or use HTML code:

[Button name](#link){: .btn .btn--success}

<a href="#link" class="btn btn--success">Button name</a>

Button Type	Example	Class	Markdown command
Default	Text	`.btn`	`[Text](#link){: .btn}`
Primary	Text	`.btn .btn--primary`	`[Text](#link){: .btn .btn--primary}`
Success	Text	`.btn .btn--success`	`[Text](#link){: .btn .btn--success}`
Warning	Text	`.btn .btn--warning`	`[Text](#link){: .btn .btn--warning}`
Danger	Text	`.btn .btn--danger`	`[Text](#link){: .btn .btn--danger}`
Info	Text	`.btn .btn--info`	`[Text](#link){: .btn .btn--info}`
Inverse	Text	`.btn .btn--inverse`	`[Text](#link){: .btn .btn--inverse}`
Light Outline	Text	`.btn .btn--light-outline`	`[Text](#link){: .btn .btn--light-outline}`

Button Size	Example	Class	Markdown command
X-Large	X-Large Button	`.btn .btn--primary .btn--x-large`	`[Text](#link){: .btn .btn--primary .btn--x-large}`
Large	Large Button	`.btn .btn--primary .btn--large`	`[Text](#link){: .btn .btn--primary .btn--large}`
Default	Default Button	`.btn .btn--primary`	`[Text](#link){: .btn .btn--primary }`
Small	Small Button	`.btn .btn--primary .btn--small`	`[Text](#link){: .btn .btn--primary .btn--small}`

To center a button, just add common center alignment options:

Markdown:

[Button name](#link){: .btn .btn--success}
{: .text-center}

HTML:

<center>
<a href="#link" class="btn btn--success">Button name</a>
</center>

Button name

Enable the table of contents by adding the following settings to the YAML front matter of your page:

---
toc: true
toc_label: "Unique Title" # default: Content
toc_icon: "heart"  # corresponding Font Awesome icon name without the "fa" prefix
toc_sticky: true   # enables sticky toc
---

Syntax highlighting

The Minimal Mistakes theme supports GitHub Flavored Markdown (GFM) ꜛ fenced code blocks. Styling and highlight colors can be edited in /_sass/syntax.scss.

Inline code snippets have to be surrounded by ` (they are not able to show syntax highlighting). Fenced code blocks can be realized either by using ~ or ` or by using the Liquid {% highlight %} tag:

~~~py
import numpy as np
a=np.arange(5)
print(a+a)
~~~

```
import numpy as np
a=np.arange(5)
print(a+a)
```

{% highlight python %}
import numpy as np
a=np.arange(5)
print(a+a)
{% endhighlight %}

render all to

import numpy as np
a=np.arange(5)
print(a+a)

Supported languages: An overview of programming languages supported for syntax highlighting can be found in this post.

Fenced code blocks without syntax highlighting can be achieved by initializing the code block without a language declaration (~~~ ... ~~~). In the Liquid highlight tag, use output as language ({% highlight output %}).

You can add the extra option linenos to the {% highlight %} tag in order to display line numbers:

{% highlight python linenos %}
import numpy as np
a=np.arange(5)
print(a+a)
{% endhighlight %}


1
2
3

import numpy as np
a=np.arange(5)
print(a+a)

If you want to display raw Liquid tags, enclose them with the raw/endraw tag:

You can also embed GitHub Gist:

<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>

External plugins and solutions I use

Here is a list of additional external plugins and solutions I have added to the theme:

Making Jekyll related posts really related!ꜛ from WebJedaꜛ
See, e.g., Related Posts section below.
Using Google Forms for Jekyll Commentsꜛ by JD Porterfieldꜛ ~~Since November 2022, I’m using Walineꜛ~~ Since August 2023, I’m using a Mastodon-powered comment system
See, e.g., Comments section below.
Easy image slide show for Jekyll static sitesꜛ by Peter Nobleꜛ
Image gallery ꜛ from Jekyll Codex ꜛ → Example
jekyll-flickr-photoset plugin
The box-shadow Property from bitsofco.deꜛ
Instructions on how to make the Masthead navigation bar “sticky” ꜛ by Quentin Fortierꜛ → Example ꜛ
A collapsible section containing Markdownꜛ by Pierre Joubert ꜛ → Example
Using GitHub Pages with Custom Domain from 1&1 IONOSꜛ by Melissa Hie ꜛ
New window fix ꜛ from Jekyll Codexꜛ
Jekyll Feed pluginꜛ → Example
Here is a quick tutorial on how to configure the plugin.
Password protection for static pagesꜛ by Matteo Brusaꜛ
Plausible Analytics, an open source and privacy-friendly website analytics tool

Minimal Mistakes Cheat Sheet

kramdown

Posts

Future posts

Fontawesome

Images

Via Markdown

Via HTML

Via Liquid

Header and teaser images

Videos

Text alignment and styling

Footnotes

In-text anchors

Definition lists

Notice boxes

Buttons

Table of Contents

Syntax highlighting

External plugins and solutions I use

11 other articles are linked to this site

Create fancy text styles with Unicode

Embedding flickr photos on your Jekyll website

Emojis for Jekyll via Jemoji

Liquid Cheat Sheet

My website is now completely cookie-free

On website subscriptions via RSS and Atom feeds

Running a personal website with Jekyll

Straying around 8 (Jun, 2021)

Supported syntax highlighting in Jekyll

Switching to a Mastodon-powered comment system

strftime Cheat Sheet

comments

kramdown

Posts

Future posts

Fontawesome

Images

Via Markdown

Via HTML

Via Liquid

Header and teaser images

Videos

Text alignment and styling

Footnotes

In-text anchors

Definition lists

Notice boxes

Buttons

Table of Contents

Syntax highlighting

External plugins and solutions I use

11 other articles are linked to this site

Related posts

comments