Applying classes to block-level elements in Markdown (when using the Kramdown processor). Shows source (.md) and generated (.html)

test.html

<style type="text/css">
ul.posts {
  list-style-type: none;
  margin: 0 auto;
  width: 60%;
}

li {
  margin-bottom: 35px;
  text-align: center;
}

p.post-content {
  text-align: left;
}

p.post-date {
  color: #A0A0A0;
  font-style: italic;
  margin-bottom: 15px;
}

p.post-content > img {
  margin: 0 auto;
  max-height: 80%;
  max-width: 100%;
}
</style>

<ul class="post-title posts">
  <li>
    <h2 id="hello-world">Hello World!</h2>
  </li>
</ul>
<ul class="post-date posts">
  <li>May 21, 2014</li>
</ul>
<ul class="post-content posts">
  <li><img src="/images/photos/blog/hello-world.jpg" alt="blog-image" /></li>
</ul>

test.md

---

---

<style type="text/css"> ul.posts { list-style-type: none; margin: 0 auto; width: 60%; } li { margin-bottom: 35px; text-align: center; } p.post-content { text-align: left; } p.post-date { color: #A0A0A0; font-style: italic; margin-bottom: 15px; } p.post-content > img { margin: 0 auto; max-height: 80%; max-width: 100%; } </style>

• Hello World!

{: .post-title .posts}

• May 21, 2014 {: .post-date .posts}
• {:.post-content .posts}