如何以编程方式将CSS类应用于Jekyll中的段落？

Question

看起来Jekyll插件提供了一种改变从Markdown到HTML的转换的方法，但我不知道从哪里开始。

假设我想将CSS类应用于帖子中的所有段落。我怎么做？例如。我有一个帖子：

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

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

HTML输出：

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

如果我对插件有误，我会使用其他解决方案（除了手动将该课程添加到Markdown中的每个段落之外）。

Answer 1

使用Kramdown IAL

要将样式应用于一个段落，您可以使用kramdown的IAL，在编写段落后，使用{: 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"}

使用SCSS

如果您想将自定义样式应用于所有帖子段落，

• 使用<div class="post">...</div>
等特定类封装您的帖子内容

• 使用仅影响.post p的自定义样式编辑您的SASS，如：

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

作为旁注，请记住，您始终可以在降价时添加简单的 html ，如：

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

Answer 2

如何将类添加到包括标题，代码和文本在内的markdown代码组中

像下面这样：

# 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"}`

仅适用于代码的最后一行

并且如果我将其分组在div或p之类的任何html容器中或跨越它们，即使我添加markdown = 1，pdown也无法正常工作

赞：

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

然后降价无法正常工作。

Answer 3

显然您需要使用

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

解析html之间的markdown。