How do you programmatically apply a CSS class to paragraphs in Jekyll?

Question

It looks like Jekyll plugins provide a way to alter the transformation from Markdown to HTML, but I'm not sure where to get started.

Say I wanted to apply a CSS class to all of the paragraphs in a post. How do I do that? E.g. I've got a post:

---
title: "my cool post"
...
---

Hey I want this paragraph wrapped in a class called my-custom-class

And the HTML outputs:

...
<p class="my-custom-class">Hey I want this paragraph wrapped in a class called my-custom-class</p>
...

If I'm mistaken about plugins, I'm cool with another solution (other than manually adding the class to each paragraph in the Markdown).

Answer 1

Using Kramdown IALs

To apply styles to just one paragraph you can use kramdown's IAL, after writing the paragraph apply the class you want with {: class="my-custom-class"}

---
title: "my cool post"
...
---

Hey I want this paragraph wrapped in a class called my-custom-class
{: class="my-custom-class"}

Using SCSS

If you want to apply the custom style to all your posts paragraphs,

• wrap your posts content with a specific class like <div class="post">...</div>

• edit your SASS with a custom style that affects only to .post p like:

  .post {
        p {
            #my-custom-style properties..
        }
   }
  

As a side note, remember also that you can always add plain html in markdown like:

<div class="my-custom-style">
    Some cool paragraph
</div>

Answer 2

Apparently you need to use

{::options parse_block_html="true" /}
<div class="my_class">
...
</div>
{::options parse_block_html="false" /}

to parse the markdown between the html.