Some tips Markdown Syntax

06 Apr 2020

Reading time ~2 minutes

Figures (for images or video)

One Up

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.

Two Up

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
    <a href="/images/image-filename-1-large.jpg"><img src="/images/image-filename-1.jpg"></a>
    <a href="/images/image-filename-2-large.jpg"><img src="/images/image-filename-2.jpg"></a>
    <figcaption>Caption describing these two images.</figcaption>
</figure>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"half"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/images/image-filename-1-large.jpg"</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">"/images/image-filename-1.jpg"</span><span class="nt">&gt;&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/images/image-filename-2-large.jpg"</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">"/images/image-filename-2.jpg"</span><span class="nt">&gt;&lt;/a&gt;</span>
    <span class="nt">&lt;figcaption&gt;</span>Caption describing these two images.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span></code></pre></figure>

And you’ll get something that looks like this:

Two images.

<figure class="half">
	<a href="http://placehold.it/1200x600.JPG"><img src="http://placehold.it/600x300.jpg"></a>
	<a href="http://placehold.it/1200x600.jpeg"><img src="http://placehold.it/600x300.jpg"></a>
	<figcaption>Two images.</figcaption>
</figure>

Three Up

Apply the third class like so to display three images side by side that share the same caption.

<figure class="third">
	<img src="/images/image-filename-1.jpg">
	<img src="/images/image-filename-2.jpg">
	<img src="/images/image-filename-3.jpg">
	<figcaption>Caption describing these three images.</figcaption>
</figure>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"third"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/images/image-filename-1.jpg"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/images/image-filename-2.jpg"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/images/image-filename-3.jpg"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;figcaption&gt;</span>Caption describing these three images.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span></code></pre></figure>

And you’ll get something that looks like this:

Three images.

<figure class="third">
	<img src="http://placehold.it/600x300.jpg">
	<img src="http://placehold.it/600x300.jpg">
	<img src="http://placehold.it/600x300.jpg">
	<figcaption>Three images.</figcaption>
</figure>

Alternative way

Another way to achieve the same result is to include gallery Liquid template. In this case you don’t have to write any HTML tags – just copy a small block of code, adjust the parameters (see below) and fill the block with any number of links to images. You can mix relative and external links.

Here is the block you might want to use:

{% capture images %}
	http://vignette2.wikia.nocookie.net/naruto/images/9/97/Hinata.png
	http://vignette4.wikia.nocookie.net/naruto/images/7/79/Hinata_Part_II.png
	http://vignette1.wikia.nocookie.net/naruto/images/1/15/J%C5%ABho_S%C5%8Dshiken.png
{% endcapture %}
{% include gallery images=images caption="Test images" cols=3 %}

<figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span class="p">{%</span><span class="w"> </span><span class="nt">capture</span><span class="w"> </span><span class="nv">images</span><span class="w"> </span><span class="p">%}</span>
	http://vignette2.wikia.nocookie.net/naruto/images/9/97/Hinata.png
	http://vignette4.wikia.nocookie.net/naruto/images/7/79/Hinata_Part_II.png
	http://vignette1.wikia.nocookie.net/naruto/images/1/15/J%C5%ABho_S%C5%8Dshiken.png
<span class="p">{%</span><span class="w"> </span><span class="nt">endcapture</span><span class="w"> </span><span class="p">%}</span>
<span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="nv">gallery</span><span class="w"> </span><span class="na">images</span><span class="o">=</span><span class="nv">images</span><span class="w"> </span><span class="na">caption</span><span class="o">=</span><span class="s2">"Test images"</span><span class="w"> </span><span class="na">cols</span><span class="o">=</span><span class="mi">3</span><span class="w"> </span><span class="p">%}</span></code></pre></figure>

Parameters:

caption: Sets the caption under the gallery (see figcaption HTML tag above);
cols: Sets the number of columns of the gallery. Available values: [1..3].

It will look something like this:

Test images

<figure class="third">
    
    <a href="http://vignette2.wikia.nocookie.net/naruto/images/9/97/Hinata.png"><img src="http://vignette2.wikia.nocookie.net/naruto/images/9/97/Hinata.png" alt=""></a>
    
    <a href="http://vignette4.wikia.nocookie.net/naruto/images/7/79/Hinata_Part_II.png"><img src="http://vignette4.wikia.nocookie.net/naruto/images/7/79/Hinata_Part_II.png" alt=""></a>
    
    <a href="http://vignette1.wikia.nocookie.net/naruto/images/1/15/J%C5%ABho_S%C5%8Dshiken.png"><img src="http://vignette1.wikia.nocookie.net/naruto/images/1/15/J%C5%ABho_S%C5%8Dshiken.png" alt=""></a>
    
    <figcaption>Test images</figcaption>
</figure>

Code Snippets

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

Buttons

Make any link standout more when applying the .btn class.

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

KBD

You can also use <kbd> tag for keyboard buttons.

<kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd>

Press WASD to move your car. Midtown Maddness!!

Notices

Watch out! You can also add notices by appending {: .notice} to a paragraph.