Jekyll 在 Markdown 文档中给 <p>段落标签添加自定义 Class(也适用于ul,ol,table,h1-h6标签)

Jekyll 虽然很老牌了但是真的很好用,很多很实用的功能其实都本身就已经实现了,只是官方文档可能没那么好找到,比如在 Markdown 文档中给内容增加 Class ,真个功能很多时候都非常实用,Jekyll 本身就实现了这个功能,而且使用起来也非常简单,看下文示例,轻松上手 Markdown 给标签添加 class。后续一极乐博客也会分享更多 jekyll 技巧。

1
2
{: .txt-yellow .bg-blue}
这个段落添加了2个自定义 Class,分别是 .txt-yellow(样式:黄色文字) 和 .bg-blue(样式:蓝色背景)

Markdown 解析后的代码结构

1
2
3
<p class="txt-yellow bg-blue">
这个段落添加了2个自定义 Class,分别是 .txt-yellow(样式:黄色文字) 和 .bg-blue(样式:蓝色背景)
</p>

ul 无序列表添加 Class 案例

1
2
3
4
{: .txt-yellow .bg-blue}
- 松鼠
- 老虎
- 老鼠

table 表格添加 Class 案例

1
2
3
4
5
{: .txt-yellow .bg-blue}
| 类型 | 标签 |
| -- | -- |
| span | 行内标签|
| p | 块标签 |

Relay Tips: 一极乐https://yijile.com/log/552/