Markdown Lists and Nested Lists

In this guide, we will demonstrate the lists and nested lists in Markdown.

Prerequisite:

The steps that are demonstrated in this guide require the following components:

• A suitable Markdown editor. For example, Pulsar, VSCodium, etc.
• A basic understanding of Markdown.

Lists and Nested Lists in Markdown

Markdown is a lightweight markup language that allows a text document to integrate various elements like images, tables, lists, headings, footnotes, and more. Besides the default syntax, Markdown also supports various HTML elements.

The default Markdown supports both ordered and unordered lists. It’s also possible to have nested lists of different types. Since Markdown supports HTML, we can also use HTML to create the ordered/unordered lists with nesting.

Preparing the Editor

For demonstration, we use the Pulsar editor as it comes with Markdown live preview. To open a new blank document, go to File >> New File or use the “Ctrl + N” keyboard shortcut.

Next, launch the Markdown preview from Packages >> Markdown Preview >> Toggle Preview or use the “Ctrl + Shift + M” keyboard shortcut.

Unordered List

To create an unordered list, there are a couple of Markdown syntaxes. The following example demonstrates all of them:

Here:

• We use the “*“, “+“, and “–” to create an unordered list.
• All the items in the unordered list are rendered as bullet points.
• Not all Markdown implementation agrees on how to handle multiple delimiters in a single unordered list. It’s strongly recommended to use a single delimiter.

If we want to make the unordered list using HTML, we use the following syntax:

This approach has the benefit of specifying the item marker:

There are four different item markers available: disc, circle, square, and none (no item marker).

Ordered List

To create an ordered list, the Markdown syntax is as follows:

Here:

• Each item number is followed by a period. In Markdown, it specifies an ordered list.
• The numbering doesn’t have to be sequential. However, the rendered output is sequential by default.

The item number of the first item of the list determines the subsequent item numbering in the output:

Here, the item list starts from number 99 which is the first item number of the list. This is why it’s recommended to use number 1 for the first item on the list.

As always, we can also implement an ordered list using HTML:

Here:

• The rendering engine automatically numbers the items, starting from 1.
• You don’t have the freedom to start the numbering from a different value.

However, using the “type” attribute, we can change the type of the list item marker:

There are several supported list item markers: 1, a, A, I, and i.

Nested Lists

You can create the nested lists in Markdown. It’s possible to mix any type of nesting. For example, an ordered/unordered list within an ordered/unordered list. There’s also no limit to how many nested lists you create as long as you’re keeping track of them.

Nested Unordered List

The following example showcases an unordered list within an ordered list:

The following example showcases an unordered list within an unordered list:

Nested Ordered List

The following example showcases an ordered list within an ordered list:

The next example showcases an ordered list within an unordered list:

Multi-layer Nesting

So far, we created only two layers of nesting. However, Markdown can also work with more layers:

Saving the Output as HTML

The Pulsar editor allows saving the output as an HTML document. To copy the HTML code, right-click on the preview panel and select “Copy as HTML”.

To save the document as HTML, right-click and select “Save as HTML” instead.

Conclusion

We showcased using both ordered and unordered lists in Markdown. We also demonstrated about nesting both ordered and unordered lists in different lists. Finally, we also showcased working with multi-layer nesting.

Interested in learning more about Markdown? The Markdown sub-category contains numerous guides on various aspects of Markdown.