For the implementation of the script, the tool we are using here is Visual Studio Code.”
Example # 1: Unordered Nested Lists in Markdown
This demonstration will elaborate on the technique of nesting the unordered lists in markdown. To create an unordered list, markdown provides us with different options that can be utilized to generate an unordered list. These are Plus sign (+), Dashes (-), or Asterisks (*). You can use any of these options. Let’s see how each of these will work.
We will first create a list by adding the Dashes (-) before the list item. We have created a list. To make a list with dashes, the pattern that needs to be followed is that we have to add a Dash (-), then a space, and the name of the list. For the next list, the markdown will detect the format and add the preceding tempo in the next script line automatically. As we are using the Dashes (-) to make an unordered list, when we move to the next line, it automatically puts the dash. Here we have made a list with 5 items which are “Pakistan”, “Iran”, “Afghanistan”, “India,” and the last item, “China”.
The preview window shows us 5 list items which are displayed with bullets. The result can be seen in the snapshot attached below.
Now we will use the Plus sign (+) sign to make the markup unordered list.
Here we just have replaced the Dashes (-) with the Plus sign (+).
This gives us the same output which we got for the above exercise technique.
Now we’ll check it with the last technique, which is adding the Asterisks (*) before the list item name.
By adding the Asterisks, even we get the same bullet lists.
We have learned from this that all these techniques will render the same output unordered list with items shown with bullets.
For making the nested lists, the techniques that can be employed are the same as those discussed above. We are picking the Dash (-) technique to create the unordered nested lists. We first added a heading by using the hash (#) symbol and a space before the heading text. The one “#” refers to the “h1” heading style. The text we have specified for the heading is “Countries with Capital Cities”, so this will be our main heading. Then in the next line, we introduce a subheading by using the triple hashes, which refer to the “h3” heading. And the string for the heading is “The list of countries, and their capitals are:”. The nested list then begins. We have added the dash (-) symbol to create the first list item as “Pakistan”.
To add a list within this list, in the next line of the script, we have to add four spaces. Then the dash (-), space, and name of the sublist are scripted. So we the first list item as “Pakistan” and within it, the sublist is added as “Islamabad”, then the next item of the list as “Iran” with sublist item “Tehran”, 3rd list item appended is “Afghanistan” having sublist item “Kabul”, then “India” with nested list item “Delhi” and lastly the “China” having sublist item “Beijing”.
The rendered output can be observed in the image attached below, which shows a heading, subheading, and then nested unordered markdown lists.
Example # 2: Ordered Nested Lists in Markdown
This illustration will let us understand the markdown ordered lists and how to create nested ordered lists.
The ordered lists are those whose items are added with the numbers. For creating an ordered list, the number specified for the first list item will determine the starting number of the output sequential list number. Let’s learn it through a script.
We have created a list with 7 items as “Red”, “Blue”, “Purple”, “Orange”, “Yellow”, “Pink”, and “White”. To create an ordered list with these items, we have added the numbers, a period, and the name of the item. Here we have started the list with the number “1,” which goes sequentially up to “7”.
Here is the output for the above-written markdown script.
Now let’s see what will happen if we add random numbers to the list with the same items.
We have changed the numbers and now added them as “1”, “4”, “3”, “7”, “2”, “7,” and “5”. You can observe the numbers are added randomly.
But the preview window shows us the output list with a sequential list starting from 1. This is because markdown just considers the first provided number and then orders the list sequentially, starting from that particular number onward.
For your convenience, we will provide another example where the first number we have specified is “5” and then some random numbers.
You can see in the output that the list starts from 5 and then adds the numbers sequentially onward. So, you must have to start numbering the list items from “1” so it goes in the proper order of numbers.
We can also create a nested ordered list in markdown. For this, we have first added a heading using the single hash (#) as “Nested Ordered List,” and then the subheading is created with the “h3” style using 3 hashes (###) with the text “This is our nested ordered list in markdown:”. Now using the list created above, we have added some sublists in it. The sublists are created by adding four spaces and then the number, a space, and the item name. The sublist must start from the number“1,”. So we have added sublist items for the list items “Purple” and “Yellow” as “Plum”, “Yellow,” and “Lime,” respectively.
This will give us the resultant nested ordered list, which is displayed in the snapshot below.
Example # 3: Mix Nested Lists in Markdown
In the last instance, we will see how to create a nested list using the ordered and unordered lists. We will create an unordered list; within this list, an ordered list will be generated, and then another unordered sublist will be initialized within the ordered list.
We have first added a heading and a subheading, and then we begin the first list with the unordered list. The first item of the unordered list is “Asia”; within this list, we have started a new ordered list with the name of that particular content’s country. And then, under the name of the countries sublist, we have created another sublist which is holding the name of a city of that specific country. So, for the unordered list item “Asia”, we have ordered list items “Pakistan”, “Iran”, and “China”. And under the ordered list item “Pakistan,” we have an unordered list item “Rawalpindi”.
You can see the rest of the script in the image below:
This yields us the following outcome showing nested lists:
Conclusion
This guide elaborated on the techniques for creating lists and nesting them together. We have explained the 2 different types of lists which are unordered and ordered lists. We carried out 3 instances in this article. In the first example, we learned to make a simple unordered list and nested unordered lists. Then the 2nd illustration talked about the ordered lists and nested ordered lists. The last instance emphasized the nesting of ordered and unordered lists together.
