Markdown

Question

如何在使用 markdown 时向列表添加 class 属性？例如，什么 Markdown 会生成以下 HTML?

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Answer 1

Markdown 不允许添加 CSS 类，因为它是一种文本格式语言而不是编码语言。它主要用于富文本文档，转换为 HTML 更像是一种额外的能力，而不是它的初衷。

你的 markdown 文档中仍然可以有 HTML，所以这样的事情是可能的

Heading
=======

Just a plain paragraph

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

或者，如果您知道要更改的列表项的确切位置，您可以在 css 内使用伪类

ul {
  list-style: none;
}
ul li {
  background: lightgrey;
}
ul li:last-child {
  background: grey;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Answer 2

普通"Markdown doesn't allow for CSS classes to be added"，但也有一些像markdown extra, who allow you set the id and class attribute on certain elements using an attribute block这样的衍生品。但是这些特殊属性方块只能与:

一起使用

headers
受保护的代码块
links
图片

很遗憾，"your" 列表不可用，但也许您可以使用 link。

Answer 3

在带有 kramdown 的 jekyll v4.2.0 中，我能够添加一个 class，在我的例子中是“错误”到列表项，也许它也适用于你的 markdown 解析器。


My Text, will end with a list.

- ele 1
- ele 2
- {: .error }ele 3
- ele 4

将生成此 html

<p>My Text, will end with a list.</p>
<ol>
<li>ele 1</li>
<li>ele 2</li>
<li class="error">ele 3</li>
<li>ele 4</li>
</ol>

Markdown - 添加 class 到列表项

Markdown - add class to list items

css