The features described in this section are specific for this template. All other language features can be found in the kramdown documentation.

Image Features

Parallax Effect

Keep in mind that paralax effect will not be captured if you like to print the page.

<div class="bg-scroll" style="background-image: url('{{ "/media/img/mountain1.jpg" | absolute_url }}')"></div>

Caption for Image

<figure>
   <img src="{{ "/media/img/mountain2.jpg" | absolute_url }}" />
   <figcaption>A nice mountain.</figcaption>
</figure>

Image Allignment

![]({{ "/media/img/mountain3.gif#right" | absolute_url }})
![]({{ "/media/img/mountain2.gif#left" | absolute_url }})

Allignment with caption

<aside>
   <figure class="left">
      <img src="{{ "/media/img/mountain3.jpg#left" | absolute_url }}" />
      <figcaption>What a view!</figcaption>
   </figure>
</aside>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ante nulla, quis pulvinar nibh tempus sed. In congue congue odio, vel ornare mauris ultrices vel. Vestibulum tristique eros at enim vulputate fringilla. Nullam non augue sit amet elit interdum tempus non ut justo.

Phasellus ut ipsum id leo sagittis pretium a quis neque. Maecenas rutrum lectus id magna malesuada, non dapibus neque tincidunt. Suspendisse ultrices accumsan eros, sit amet facilisis quam hendrerit a. Integer sed felis et diam efficitur accumsan. Suspendisse facilisis lectus non orci mattis vestibulum. Suspendisse molestie vulputate nunc non tincidunt. Maecenas vulputate, mauris ut rhoncus vulputate, tellus augue aliquet nibh, vel egestas nulla ipsum bibendum lorem. Pellentesque posuere laoreet lectus eget luctus. Vestibulum mattis ut ligula sed sodales. Vestibulum sit amet viverra arcu.

Fullscreen image

<div class="large">
   ![]({{ "/media/img/mountain2.jpg" | absolute_url }})
</div>

With caption

<figure class="large" markdown="1">   
   ![]({{ "/media/img/mountain2.jpg" | absolute_url }})
   <figcaption>On top of the mountain!</figcaption>
</figure>

Image Gallery

<div class="album">
   ![]({{ "/media/img/Screenshot_2016-04-09-19-16-28.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-02-00-48-25.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-01-12-03-36.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-01-12-01-33.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-03-24-12-13-58.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-03-17-22-50-05.png" | absolute_url }})
</div>

With caption

<div class="album">
   // ...
   <figure>
      <img src="{{ "/media/img/mountain2.jpg" | absolute_url }}" />
      <figcaption>On top of the mountain!</figcaption>
   </figure>
   <figure>
      <img src="{{ "/media/img/mountain3.jpg" | absolute_url }}" />
      <figcaption>What a view</figcaption>
   </figure>
</div>

Sourcecode Features

With language highlighting

    ```html
    <script>
        var decentThemeConfig = {
            ga: 'YOUR TRACK ID'
        };
    </script>
    ```

With language highlighting, line numbers and line highlighting

<pre data-line="5" class="line-numbers language-javascript"><code>
   Array.prototype.uniq = function () {
       var map = {};
       return this.filter(function (item) {
           if (map[item]) {
               return false;
           } else {
               map[item] = true;
               return true;
           }
       });
   };
</code></pre>

Author in quote

> Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.
> 
> <cite>——R.M. Nixon</cite>

Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.

——R.M. Nixon

Attention Box

<div class="tip">
Chemicals including paint and thinners must be stored in labelled containers that are in good condition, as provided for in the regulations. Liquids must be placed in holding tanks.
</div>

404 Page

The 404 page has a fuzzy search implemented that lists urls that are similar to the entered url. Try it out: Unknown URL

JSON API

The theme offers a JSON API for the blog posts. You can query all blog posts via: /api/posts.json

PDF and PowerPoint integration

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://img.labnol.org/di/PowerPoint.ppt' frameborder='0'></iframe>

MathJax integration

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

The result of this code:

More

More formating features can be found in the Kramdown syntax.