CODEWITHSUNDEEP
htmlcssmarkdownjekyll
Kayce Basques
Kayce Basques

Reputation: 25957

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

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).

Upvotes: 11

Views: 3936

Answers (3)

user11198071
user11198071

Reputation: 11

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.

Upvotes: 1

Prateek Raj Gautam
Prateek Raj Gautam

Reputation: 27

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.

Upvotes: 0

marcanuy
marcanuy

Reputation: 23982

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>

Upvotes: 12

Related Questions