This theme support some cool styles to let you write a more elegent and rich-style article, such as preface, image gallery and so on. Basically it just need you to wrap your content in a HTML tag, like this:
<div class="preface">
Your preface here
</div>So there is no magic. But you should also know that, markdown parser won't parse the markdown syntax inside the HTML tag, except the image syntax. So if you're writing something like this:
<div class="preface">
This is *some* preface.
</div>The result will just print *some*, instead of transform it to italic style.
Wrap your preface in a div tag with preface class.
<div class="preface">
Here is your preface...
</div>Wrap your tips content in a div tag with tip class.
<div class="tip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Just add a <cite></cite> tag below your quote.
Demo: Post page demostration
> 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>
Wrap your image with a <figure></figure> tag, and place your caption in a <figcaption></figcaption> tag.
Demo: Post page demostration
<figure>
<figcaption>This is figcaption. A beautiful picture.</figcaption>
</figure>
Add a hash that contain alignment in your image's url.
Demo: Post page demostration
Simply add a class left or right to your <figure></figure> tag.
Demo: Post page demostration
<figure class="left">
<figcaption>hello world!</figcaption>
</figure>
Wrap your image with an element that has a large class.
Demo: Post page demostration
<div class="large">
</div>Give your <figure></figure> a large class.
Demo: Post page demostration
<figure class="large">
<figcaption>wow so handsome</figcaption>
</figure>Place your images within an element that has a album class.
Demo: Post page demostration
<div class="album">
</div>
Just like image gallery, place your <figure></figure> tags instead of images in an element that has a album class.
Demo: Post page demostration
<div class="album">
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
<figure>
<figcaption>wow so handsome</figcaption>
</figure>
</div>