Three-level nested list in kramdown

Question

I have been trying to create a nested list like the following (with kramdown, for use on GitHub pages), but the HTML output is not semantic; paragraphs are used instead of list elements for the 2nd-level list, and code blocks are used for the 3rd-level list items.

1. Do something.

2. Do something else.

    a. If the reverse-Pi separation gauge is set to `OFF` you can follow
       the following procedure.

        i. Use the flux capacitor on Mondays, Tuesdays and Thursdays, but
           only if you have not done so already.

        ii. Do not use the flux capacitor if it's raining, because the
            universe will implode.

    b. If the reverse-Pi separation gauge is set to `ON` then you
       should follow Procedure 42.

3. Go back to doing things.

The above produces the following HTML...

<ol>
  <li>
    <p>Do something.</p>
  </li>
  <li>
    <p>Do something else.</p>

    <p>a. If the reverse-Pi separation gauge is set to <code>OFF</code> you can follow
    the following procedure.</p>

    <pre><code> i. Use the flux capacitor on Mondays, Tuesdays and Thursdays, but
    only if you have not done so already.

 ii. Do not use the flux capacitor if it's raining, because the
     universe will implode.
</code></pre>

    <p>b. If the reverse-Pi separation gauge is set to <code>ON</code> then you
    should follow Procedure 42.</p>
  </li>
  <li>
    <p>Go back to doing things.</p>
  </li>
</ol>

I have tried altering the indentation and even removing the blank lines between items, but can’t get it to function as intended.

Replacing all of the list 'bullets' with 1. rather than their actual numbers does make it generate correctly-structured HTML (thanks to Scroog1 for that suggestion offline); then one can use CSS to make the output HTML lists have the desired list-style-type. However, this feels contrary to Markdown's "it should be readable as plain text" philosophy, so I was wondering if there is any way to make it work and look as intended in the markdown version?

(I suppose it could be argued that in this particular case, where HTML is the only format of my document that people will read, it's better to have the machine do the numbering, and it's cleaner to use CSS rather than inline styles generated by the markdown processor to achieve the desired list formatting, but I'm curious as to whether the failure above might be either my misuse of, or maybe a bug or design decision in, kramdown.)

Answer 1

Make them all ordered lists

1. Do something.

2. Do something else.

    1. If the reverse-Pi separation gauge is set to `OFF` you can follow
       the following procedure.

        1. Use the flux capacitor on Mondays, Tuesdays and Thursdays, but
           only if you have not done so already.

        2. Do not use the flux capacitor if it's raining, because the
            universe will implode.

    2 If the reverse-Pi separation gauge is set to `ON` then you
       should follow Procedure 42.

3. Go back to doing things.

Then apply styles

li li{
    list-style-type: lower-alpha;
}

li li li{
    list-style-type: lower-roman;
}

See MDN on CSS

Answer 2

The Kramdown documentation doesn't show any examples of supporting ordered lists other than numeric 1,2,3....

It uses the value of the first list indicator to determine if the list is ordered or unordered and you can apply a style class inline with the lists like this:

1. {:.cls} This item has the class "cls".
2. {:.cls} This item also as the class "cls".

This is still mostly readable as plaintext and will make your CSS easier to manage (the style class on numbers 2-x may not be necessary, I've never tried that out).