DEV Community

matt swanson
matt swanson

Posted on • Originally published at boringrails.com on

Setting CSS classes in Markdown with Jekyll

Writing blog posts in Markdown is just great. This blog is written in Markdown!

But sometimes you might be tempted to drop down to raw HTML to add some extra styling.

Usage

Jekyll uses Kramdown under-the-hood to render your Markdown by default.

In Kramdown, there is a feature called “Block Inline Attribute Lists”, which is an extension of standard Markdown syntax.

A simple paragraph with an ID attribute.
{: #para-one}

> A blockquote with a title
{: .pull-quote }
Enter fullscreen mode Exit fullscreen mode

You use {: CSS_SELECTOR } to attach additional HTML attributes to the rendered Markdown output.

Jekyll CSS classes

It’s great for adding small embellishments to your posts without having to drop down to raw HTML.

Additional Resources

Kramdown Doc: Inline Attribute Lists


Top comments (0)