0

我正在尝试在 Markdown 文档中设置单个列表的样式，该列表将被转换为 HTML。我无法li通过 CSS 设置标签的样式，因为所有列表都被设置了样式，并且我不能div在特殊列表周围使用 a，因为这样multimarkdown就不会在div. 所以我尝试span了。

这里是示例 Markdown 文档：

A normal list:

* List-item-one
* List-item-two

The special-styled list:

<span class="linelist">

* List-item-alpha
* List-item-beta

</span>

我通过 multimarkdown 将其转换为 HTML。显示特殊列表的相关部分如下所示：

<p><span class="linelist"></p>

<ul>
<li>List-item-alpha</li>
<li>List-item-beta</li>
</ul>

<p></span></p>

到目前为止一切都很好，但是当我使用具有以下linelist类的 CSS 时

.linelist {
    display: inline;
    color: red;
}

特殊列表在浏览器中仍然没有颜色或内联属性呈现。

如何linelist在不将类添加到ulorli标记的情况下将类应用或“注入”到列表项（因为 Markdown 会生成列表）。

更新：使用的降价转换器是折扣库的变体。如果有一个独立于转换器的纯 CSS 解决方案会很好。

4

1 回答 1

1

您需要告诉 MultiMarkdown 处理 HTML 块内的 Markdown。有几种方法可以做到这一点（如文档中所述）

markdown=1首先，您可以通过设置包含的原始 HTML 元素简单地将块标记为包含 Markdown 文本：

<div class="linelist" markdown=1>

* List-item-alpha
* List-item-beta

</div>

这应该给你这个输出：

<div class="linelist">
    <ul>
        <li>List-item-alpha</li>
        <li>List-item-beta</li>
    </ul>
</div>

第二个选项是使用命令行选项告诉 MultiMarkdown 处理所有HTML 块中的 Markdown 文本。--process-html如果你走这条路，你可以省略，markdown=1但请注意，任何原始 HTML 中的所有文本都将作为 Markdown 处理，这可能会在某些边缘情况下产生不良结果。通常最好坚持使用该markdown=1方法，并且仅在需要时才明确要求进行 Markdown 处理。

最后，您的 CSS 需要修复，即使使用markdown=1技巧也是如此。该类linelist指向 div，而不是列表。虽然颜色变化会被所有 div 元素的子元素继承，但display: inline可能不会。实际上，display: inline需要专门应用于li：

.linelist ul li {
    display: inline;
    color: red;
}

注意第一行；该规则适用于任何li作为 aul的子级的任何元素，该子级是具有类的任何元素的子linelist级。

顺便说一句，你使用 span 是行不通的（即使 CSS 是固定的），因为 span 是一个内联元素，而一个内联元素不能包含块级元素。虽然这意味着您的输出无效，但浏览器是为处理无效标记而构建的。实际上，浏览器可能（不同的浏览器可能会以这种稍微不同且不可预测的方式）解释您的输出（带有跨度），如下所示：

<p><span class="linelist"></span></p>

<ul>
<li>List-item-alpha</li>
<li>List-item-beta</li>
</ul>

<p><span></span></p>

请注意，当浏览器到达块元素（<p>本例中的元素）的末尾时，它会为您关闭未闭合的跨度。因此，就浏览器而言，您的跨度实际上并没有包装列表，因此任何 CSS 都不会使用lineline该类应用于列表。因此，您必须使用 div，或者至少使用一些块级元素。

如果您正在使用折扣（如问题更新中所示），您可以使用类块创建一个分配给它的类的 div：

> %linelist%
> * List-item-alpha
> * List-item-beta

我对折扣不是很熟悉，这未经测试，但根据文档，上面的输入应该给出以下输出：

<div class="linelist">
    <ul>
        <li>List-item-alpha</li>
        <li>List-item-beta</li>
    </ul>
</div>

请确保未设置该标志，MKD_NODIVQUOTE 因为这会禁用此功能。我不确定这一点，但如果我正确理解文档，则该MKD_TAGTEXT标志可能会启用解析 HTML 标记内的 Markdown 文本作为第二个选项。

于 2015-05-09T00:34:14.303 回答