How to style an individual list in markdown for HTML output

Question

I'm trying to style an individual list in an Markdown document which will get converted into HTML. I cannot style the li tag via CSS, because than all lists are styled and I cannot use a div around the special list, because then multimarkdown will not convert the Markdown inside the div. So I tried span instead.

Here the sample Markdown document:

A normal list:

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

The special-styled list:

<span class="linelist">

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

</span>

I convert this via multimarkdown to HTML. The relevant section showing the special list looks like this:

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

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

<p></span></p>

So far so good, but when I use a CSS with the following linelist class

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

the special list is in the browser still rendered without colour or inline attribute.

How can I apply or "inject" the linelist class to the list items without adding the class to the ul or li tag (because Markdown generates the list).

Update: The markdown converter which gets used is a variant of the Discount library. Would be nice if there is a pure CSS solution independent of the converter.

Waylan · Answer 1 · 2015-05-10T01:29:31.060

You need to tell MultiMarkdown to process Markdown inside HTML blocks. There are a couple ways to do this (as explained in the docs)

First, you can simply mark a block as containing Markdown text by setting markdown=1 on the containing raw HTML element:

<div class="linelist" markdown=1>

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

</div>

Which should give you this output:

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

The second option is to tell MultiMarkdown to process Markdown text within all HTML blocks by using the --process-html command line option. If you go that route, you can leave out the markdown=1 but be aware that all text in any raw HTML will be processed as Markdown which may give undesirable results in certain edge cases. It is generally best to stick with the markdown=1 method and explicitly ask for Markdown processing only when it is needed.

Finally, your CSS needs to be fixed, even using the markdown=1 trick. The class linelist points to the div, not the list. While the color change will get inherited by all the div element's children, the display: inline may not. In fact, display: inline needs to be applied specifically to the li:

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

Notice the first line; the rule applies to any li which is a child of a ul which is a child of any element with a linelist class.

By the way, your use of a span would not work (even with the CSS fixed) because a span is an inline element and an inline element cannot contain block level elements. While that means your output is invalid, browsers are built to handle the invalid markup. In fact, a browser might (different browsers may so this slightly differant and unpredictable ways) interpret your output (with the span) like this:

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

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

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

Notice that when the browser reaches the end of the block element (the <p> element in this case), it closes the unclosed span for you. Therefore, your span does not actually wrap the list as far as the browser is concerned and for that reason no CSS will ever apply to the list using the lineline class. Therefore, you have to use the div, or at least some block level element.

If you are using Discount (as indicated in the update to the question), you can use a Class Block to create a div with a class assigned to it:

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

I'm not real familiar with Discount and this is untested, but according to the docs the above input should give the following output:

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

Just be sure that the MKD_NODIVQUOTE flag is not set as that disables this feature. I'm not sure about this, but if I'm understanding the docs correctly, the MKD_TAGTEXT flag may enable parsing of Markdown text inside HTML tags as a second option.

Thx for your very detailed and informative answer. And you are correct: For `multimarkdown` the `markdown=1` flag works, however as I found out in my case not the `multimarkdown` tool is used but a "variant" of Discount, therefore it would be great if there is a way to apply the CSS *without* changing the standard way Markdown converters work. - I have updated the question accordingly. — halloleo, May 09 '15 at 22:26
@halloleo I updated my comment with some info about Discount. As you did not indicate which variant of Discount you are using, I am unable to determine if that variant supports the mentioned features. Interestingly, I first learned about those features when I followed the link you provided. You might try reading the documentation of the implementation you are using. If it is possible, you will likely find the answer. — Waylan, May 10 '15 at 01:33
Well, trouble is I have no control over how Discount is called. It is used inside [Trunk Notes](http://trunknotes.com/). If there is no generic way in CSS to reach into a list block without creating a new outer block element, I guess I just have to give up... Anyway, thanks heaps for your insights! — halloleo, May 10 '15 at 03:34

How to style an individual list in markdown for HTML output

1 Answers1