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

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.

Answer 3

How to add class to group of markdown code including header and code and text
Like below:
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
```
___bold and italic text___
` some other code`
I want to all container class to all the above starting form header
`{: class="container"}`
works only for the last line of code
and if I group it in any html container like div or p or span them markdown don't work even if I add markdown=1
Like this:
<div markdown="1">
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
___bold and italic text___
`some other code`
<div>
then markdown doesn't work.