Nested ordened lists with markdown

Hi, I'm trying to create a nested ordered list for my app terms like this:

terms.md

## 1. Rules
    1.1. Rule 1
    1.2. Rule 2

After rendering html with Str::markdown('terms.md'); I'm geting this output:

<h2>1. Rules</h2>
<pre><code>1.1. Rules 1
1.2. Rules 2
</code></pre>

However, I want to get the following output:

<ol>
    <h2><li>Rules</li></h2>
    <ol>
        <li>Rule 1</li>
        <li>Rule 2</li>
    <ol>
<ol>

Is there any way to obtain this? What I'm doing wrong?

alexios

4 years ago

Best Answer

Level 25

If you have prepared the output in HTML, you can convert it to Markdown with converter: https://www.browserling.com/tools/html-to-markdown

Let's see also other examples how to make similar ordered list with HTML/Markdown:

HTML: https://jsfiddle.net/qGCUk/4/

Markdown:

# Rules

1. Rule 1
2. Rule 2
    1. Rule 2.1
    2. Rule 2.2
3. Rule 3
    1. Rule 3.1
    2. Rule 3.2
    3. Rule 3.3

Also look for tutorial: https://commonmark.org/help/tutorial/10-nestedLists.html

To nest one list within another, indent each item in the sublist by four spaces.

Steve-M

4 years ago

Level 2

@alexios thanks for the tip. With markdown converter I was able to style my HTML as follows:

1. ## Rules

    1. Rule 1
    2. Rule 2

It gives me the following HTML output:

<ol>
    <li><h2>Rules</h2>
        <ol>
            <li>Rule 1</li>
            <li>Rule 2</li>
        </ol>
    </li>
</ol>

Of course, additional CSS rules need to be added to style correctly numbers and to fit correctly into containers:

/* utomatic numbering of elements */
.container ol {
    counter-reset: item;
}
.container li:before {
    content: counters(item, ".") "." !important;
    counter-increment: item;
}

/* padding 1st ol level */
.container li {
    padding-left: 2rem !important;
}
/* padding 2nd ol level */
.container li > ol > li {
    padding-left: 2.25rem !important;
}
/* padding 3rd ol level */
.container li > ol > li > ol > li {
    padding-left: 3rem !important;
}

/* adjust numbered element font size to li text size */
.container > ol > li::before {
    color: #111827;
    font-size: 1.5em;
    line-height: 1.3333333;
}

As the result I get:

1. Rules
   1.1 Rule 1
   1.2 Rule 2

1 like

Please or to participate in this conversation.