Step 1 of 5 · Reading · ~3 min
Read
Lists & Code
Lists
- unordered 1. ordered
* unordered 2. ordered
+ unordered 3) also ordered
Three bullet characters, two ordered delimiters, and several rules that surprise almost everyone the first time they hit them. Your program will turn flat lists into <ul> and <ol> blocks and wrap everything around them in paragraphs.
What makes a line a list item?
Up to three spaces of indent, then a marker, then a space or tab (or the end of the line, for an empty item). The marker is one of -, * or +, or one to nine digits followed by . or ). Without the space it is just text: -item and 1.item are paragraph words. With four spaces of indent the line is no longer a list item at all.
Do the three bullet characters mix?
No. Two items belong to the same list only if they use the same marker character, so changing the bullet silently ends one list and starts another:
| Source | Lists |
|---|---|
- alpha, - beta, * gamma, + delta | three: alpha beta, then gamma, then delta |
1. a, 2. b, 3) c | two: the . list, then the ) list |
Writers who "vary the bullets for readability" are unknowingly producing several adjacent lists, and the extra vertical margin they see in the rendered page is the reason.
What happens to the numbers you type?
Only the first one counts. The start value comes from the opening item, every later number is discarded, and the browser counts for you. A start of 1 needs no attribute; anything else is written as start.
| Source | Rendered as |
|---|---|
1. 2. 3. | <ol>, counting 1, 2, 3 |
1. 1. 1. | <ol>, counting 1, 2, 3 |
3. 9. 4. | <ol start="3">, counting 3, 4, 5 |
This is why the all-ones style is safe: reordering the source never leaves you renumbering by hand.
Which lines continue an item?
A non-blank line right after an item that is not itself a list item belongs to that item (the spec calls this lazy continuation). - one, then wraps onto, then three lines is a single item. This course joins the pieces with a single space, as it does for paragraphs.
Can a list interrupt a paragraph?
Yes: no blank line is required between prose and the bullets that follow it, so a paragraph cannot simply run until the next blank line. There are two restrictions, both there to protect ordinary prose:
- an empty item cannot interrupt a paragraph, and
- an ordered item can interrupt only if its number is 1.
So Released in, then 2024. It was good. is one paragraph (a year at the start of a wrapped line is not a list), while Shopping:, then - milk is a paragraph followed by a list.
Blank lines
For now, a blank line ends a list. Real CommonMark keeps the list going when another item of the same kind follows, and renders it differently (a "loose" list). That is its own lesson, so no input in this one has a blank line between two items of the same list.
Common mistakes
- A paragraph that swallows the list below it. Your paragraph loop must stop at a blank line and at a line that can interrupt it.
- Mixing markers in one list. Compare the marker kind, not just "is it a bullet".
- Letting any number interrupt a paragraph. Only
1.and1)can. - Forgetting
start. A list that begins at 3 needs<ol start="3">.
Your exercise
Write render. The starter gives you parse_marker (the marker rules above) and interrupts_paragraph; you decide when a list starts, which lines belong to it, and what to print. Opening and closing tags go on their own lines.
Discussion
Ask a question, share an insight, or help someone who’s stuck.
Sign in to post a comment or reply.
Loading…