Cheat Sheet

For the basics of markdown, I suggest that you just go to Adam Pritchard’s Cheat Sheet. All I want to note here are the site specific code snippets so you know how things behave or how to achieve them. If you insert an image using the normal markdown method, it’ll fit within the column width of the text.

![Image Alt](URL)

For a full width image, we actually have to insert a tad of HTML. In order for the HTML to actually be processed, be sure to include markdown="1" as shown below.

<div class="full-img" markdown="1">
![Image Alt](URL)
</div>

To get two images side by side, you’ll first have to add the grid class and then specify how many columns you want by using m-x or d-x where x equals columns. The only column numbers allowed at the moment are 2, 3, 4, and 6. If you want the column to automatically reduce to 1 column on smaller screens then you can omit m-2, m-3, etc. Alternatively, if you want to maintain the same columns on small and large screens then you can simply declare m-x.

<div class="full-img grid m-2 d-4" markdown="1">
![Image Alt](URL)
![Image Alt](URL)
</div>

Lastly, if you remove full-img then your grid of images will fit within the column width.

<div class="grid m-2 d-4" markdown="1">
![Image Alt](URL)
![Image Alt](URL)
</div>

Last updated: December 29, 2018