This content originally appeared on HackerNoon and was authored by Typesetting
Lists
You can organize items into ordered and unordered lists.
Ordered Lists
To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.
\
| Markdown | HTML | Rendered Output |
|----|----|----|
| 1. First item \n 2. Second item \n 3. Third item \n 4. Fourth item | <ol> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ol> | First itemSecond itemThird itemFourth item |
| 1. First item \n 1. Second item \n 1. Third item \n 1. Fourth item | <ol> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ol> | First itemSecond itemThird itemFourth item |
| 1. First item \n 8. Second item \n 3. Third item \n 5. Fourth item | <ol> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ol> | First itemSecond itemThird itemFourth item |
| 1. First item \n 2. Second item \n 3. Third item \n 1. Indented item \n 2. Indented item \n 4. Fourth item | <ol> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item \n <ol> \n <li>Indented item</li> \n <li>Indented item</li> \n </ol> \n </li> \n <li>Fourth item</li> \n </ol> | First itemSecond itemThird itemIndented itemIndented itemFourth item |
Ordered List Best Practices
CommonMark and a few other lightweight markup languages let you use a parenthesis ()) as a delimiter (e.g., 1) First item), but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. For compatibility, use periods only.
\
| ✅ Do this | ❌ Don't do this |
|----|----|
| 1. First item \n 2. Second item | 1) First item \n 2) Second item |
Unordered Lists
To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.
\
| Markdown | HTML | Rendered Output |
|----|----|----|
| - First item \n - Second item \n - Third item \n - Fourth item | <ul> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ul> | First itemSecond itemThird itemFourth item |
| * First item \n * Second item \n * Third item \n * Fourth item | <ul> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ul> | First itemSecond itemThird itemFourth item |
| + First item \n + Second item \n + Third item \n + Fourth item | <ul> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item</li> \n <li>Fourth item</li> \n </ul> | First itemSecond itemThird itemFourth item |
| - First item \n - Second item \n - Third item \n - Indented item \n - Indented item \n - Fourth item | <ul> \n <li>First item</li> \n <li>Second item</li> \n <li>Third item \n <ul> \n <li>Indented item</li> \n <li>Indented item</li> \n </ul> \n </li> \n <li>Fourth item</li> \n </ul> | First itemSecond itemThird itemIndented itemIndented itemFourth item |
Starting Unordered List Items With Numbers
If you need to start an unordered list item with a number followed by a period, you can use a backslash (\) to escape the period.
\
| Markdown | HTML | Rendered Output |
|----|----|----|
| - 1968\. A great year! \n - I think 1969 was second best. | <ul> \n <li>1968. A great year!</li> \n <li>I think 1969 was second best.</li> \n </ul> | 1968. A great year!I think 1969 was second best. |
Unordered List Best Practices
Markdown applications don’t agree on how to handle different delimiters in the same list. For compatibility, don’t mix and match delimiters in the same list — pick one and stick with it.
\
| ✅ Do this | ❌ Don't do this |
|----|----|
| - First item \n - Second item \n - Third item \n - Fourth item | + First item \n * Second item \n - Third item \n + Fourth item |
Adding Elements in Lists
To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab, as shown in the following examples.
\
:::tip Tip: If things don't appear the way you expect, double check that you've indented the elements in the list four spaces or one tab.
:::
Paragraphs
This is the first list item.
Here's the second list item.
\ I need to add another paragraph below the second list item.
\
And here's the third list item.
\
The rendered output looks like this:
\
This is the first list item.
Here’s the second list item.
\
I need to add another paragraph below the second list item.
\
And here’s the third list item.
\
Blockquotes
This is the first list item.
Here's the second list item.
\
> A blockquote would look great below the second list item.
\
And here's the third list item.
\
The rendered output looks like this:
This is the first list item.
Here’s the second list item.
\
A blockquote would look great below the second list item.
\
- And here’s the third list item.
Code Blocks
Code blocks are normally indented four spaces or one tab. When they’re in a list, indent them eight spaces or two tabs.
\
Open the file.
\
Find the following code block on line 21:
\
<html>
<head>
<title>Test</title>
</head>
\
- Update the title to match the name of your website.
\ The rendered output looks like this:
\
Open the file.
Find the following code block on line 21:
\
<html>
<head>
<title>Test</title>
</head>
\
- Update the title to match the name of your website.
Images
- Open the file containing the Linux mascot.
- Marvel at its beauty.
\
\
- Close the file.
Lists
You can nest an unordered list in an ordered list, or vice versa.
\
First item
\
Second item
\
Third item
Indented item
Indented item
\
- Fourth item
\ The rendered output looks like this:
\
First item
\
Second item
\
Third item
Indented item
Indented item
\
- Fourth item
\
:::info This guide is a Matt Cone project available on Markdown Guide under the CC BY-SA 4.0 license.
:::
\
This content originally appeared on HackerNoon and was authored by Typesetting
Typesetting | Sciencx (2024-08-20T15:49:18+00:00) The Dead Simple Markdown Guide to Lists. Retrieved from https://www.scien.cx/2024/08/20/the-dead-simple-markdown-guide-to-lists/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.