【问题标题】：How do you programmatically apply a CSS class to paragraphs in Jekyll?您如何以编程方式将 CSS 类应用于 Jekyll 中的段落？
【发布时间】：2017-05-18 05:33:06
【问题描述】：

看起来 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 中的每个段落）。

【问题讨论】：

标签： html css markdown jekyll

【解决方案1】：

显然你需要使用

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

解析html之间的markdown。

【讨论】：

【解决方案2】：

如何将类添加到包括标题和代码和文本的标记代码组中

如下：

# 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 或跨越它们，即使我添加 markdown=1，markdown 也不起作用

像这样：

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

然后降价不起作用。

【讨论】：

【解决方案3】：

使用 Kramdown IALs

要将样式仅应用于一个段落，您可以使用 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..
      }
 }

作为旁注，还请记住，您始终可以在 markdown 中添加纯 html，例如：

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

【讨论】：