如何在 Jekyll 中编程应用 CSS 类到段落中？

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中手动为每个段落添加类名）。

- Kayce Basques

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>

• 编辑您的SASS，添加仅对.post p生效的自定义样式，例如：

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

顺便提一下，还记得你可以在Markdown中添加纯粹的 HTML 如下：

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

- marcanuy

Answer 2

显然，你需要使用

。

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

解析 HTML 之间的 Markdown。

- user11198071

Answer 3

如何将类添加到包括标题、代码和文本的 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"}`

仅适用于代码的最后一行

如果我将其分组到任何HTML容器中，例如div、p或span，则无论我是否添加markdown=1，它们都不起作用。

像这样：

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

那么Markdown就无法工作了。

- Prateek Raj Gautam