如何在markdown中為HTML輸出設置單個列表的樣式

Question

我正在嘗試在Markdown文檔中設置單個列表的樣式，該文檔將轉換為HTML。 我不能通過CSS設置li標記的樣式，因為不是所有列表都已樣式化，並且不能在特殊列表周圍使用div ，因為multimarkdown不會在div內轉換Markdown。 所以我嘗試了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類一起使用時

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

特殊列表在瀏覽器中仍然呈現為沒有顏色或內聯屬性。

我怎樣才能申請或“注入”的linelist類列表項不添加類的ul或li標簽（因為降價產生的列表）。

更新：使用的降價轉換器是Discount庫的變體。 如果有一個獨立於轉換器的純CSS解決方案，那就更好了。

Answer 1

您需要告訴MultiMarkdown在HTML塊中處理Markdown。 有兩種方法可以做到這一點（如docs中所述）

首先，您可以通過在包含原始HTML元素上設置markdown=1來簡單地將一個塊標記為包含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>

第二個選項是告訴--process-html通過使用--process-html命令行選項來處理所有 HTML塊中的Markdown文本。 如果走那條路線，您markdown=1但要注意，任何原始HTML中的所有文本都將作為Markdown處理，這在某些情況下可能會產生不良結果。 通常最好堅持使用markdown=1方法，並僅在需要時顯式請求Markdown處理。

最后，即使使用markdown=1技巧，也需要修復CSS。 類線linelist指向div，而不是列表。 雖然顏色更改將被所有div元素的子元素繼承，但display: inline可能不會。 實際上， display: inline需要專門應用於li ：

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

注意第一行； 該規則適用linelist ul的子代的li ，而ul是具有線linelist類的任何元素的linelist 。

順便說一句，您無法使用跨度（即使使用固定的CSS），因為跨度是一個內聯元素，並且一個內聯元素不能包含塊級元素。 雖然這意味着您的輸出無效，但是構建了瀏覽器來處理無效的標記。 實際上，瀏覽器可能會這樣解釋（不同的瀏覽器可能會有這種稍微不同且不可預測的方式）（具有跨度）：

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

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

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

請注意，當瀏覽器到達block元素（在本例中為<p>元素）的末尾時，它將為您關閉未封閉的跨度。 因此，就您的瀏覽器而言，您的跨度實際上並未包裝列表，因此，使用lineline類不會將CSS應用於該列表。 因此，您必須使用div或至少某些塊​​級元素。

---

如果您使用的是Discount（如問題的更新中所述），則可以使用Class Block創建具有分配給它的類的div：

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

我對Discount並不是很熟悉，並且未經測試，但是根據docs，上述輸入應提供以下輸出：

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

只需確保未設置MKD_NODIVQUOTE 標志即可，因為它會禁用此功能。 我對此不確定，但是如果我正確地理解了文檔，則MKD_TAGTEXT標志可以啟用對HTML標記內的Markdown文本進行解析的第二種選擇。