Search code examples
markdownnested-lists

How to nest numbered list to numbered header in markdown?


I'm trying this one according to documentation "nested starts at first char", but that doesn't work, falls into quotation mode idk why btw.

## 1. Section 1
      1. Step 1.1
      2. Step 1.2

1. Section 1

  1. Step 1.1
  2. Step 1.2

Then I've tried "three spaces" or "four spaces" indentation, didn't work too.

## 1. Section 1
   1. Step 1.1
   2. Step 1.2

1. Section 1

  1. Step 1.1
  2. Step 1.2

Any advices other than manual numbering?

Thanks in advance!


Solution

  • You can't nest a list item inside a heading. The content of the heading is only ever parsed an inline content. If you eliminate the heading, then things will work as expected.

    1. Section 1
        1. Step 1.1
        2. Step 1.2
    

    The above renders as the following HTML:

    <ol>
      <li>Section 1
        <ol>
          <li>Step 1.1</li>
          <li>Step 1.2</li>
        </ol>
      </li>
    </ol>
    

    which browsers will render as

    1. Section 1
      1. Step 1.1
      2. Step 1.2

    However, if you try to include a list item in a heading.

    # 1. List item
    

    it will not render as a list item. You get

    <h1>1. List item</h1>
    

    Notice that there is no <ol> and <li> tags there. Its just the plain text. And because that is not a list item, you can't nest child list items in it.

    Of course, that means you don't get the large bold text of a heading. Of course, you could define some custom CSS, but a simpler approach would be to nest a heading inside a list item.

    1. ## Section 1
        1. Step 1.1
        2. Step 1.2
    

    That renders to this HTML

    <ol>
      <li>
        <h2>Section 1</h2>
        <ol>
          <li>Step 1.1</li>
          <li>Step 1.2</li>
        </ol>
      </li>
    </ol>
    

    and like this in the browser:

    1. Section 1

      1. Step 1.1
      2. Step 1.2

    Be warned however, that this only works on some implementations of Markdown. Specifically it works on Commonmark implementations, but not on most old-school implementations. YMMV.