Skip to content

Step 1 of 5 · Reading · ~4 min

Read

Block Elements

Paragraphs & Line Breaks

A paragraph is Markdown's default: any run of non-blank lines that no other block rule claimed. That makes the paragraph handler the last branch in your block dispatcher, and it makes the blank line the single most important character sequence in the format. Your program will group the input into paragraphs, wrap each one in <p>, and turn the two kinds of "hard" line ending into <br />.

What ends a paragraph?

A blank line, and essentially nothing else. In CommonMark a line is blank when it holds nothing but spaces and tabs Two or ten blank lines in a row do the same job as one: they separate, they do not count.

Here is the whole algorithm run on a small document. The column on the right is the list of lines you are holding that have not been written out yet:

Input lineBlank?ActionHeld lines
Shipping notesnohold it1 line
for the 2.1 release.nohold it2 lines
(empty)yeswrite <p>Shipping notes for the 2.1 release.</p>none
(empty)yesnothing held, so nothing to writenone
(empty)yesnothing held, so nothing to writenone
Second note.nohold it1 line
end of inputwrite <p>Second note.</p>none

Two details in that table carry most of the weight. The check "do I hold anything?" is what stops a run of blank lines from producing empty <p></p> shells. And the final row, the flush at the end of the input, is what saves the last paragraph of a document that does not end with a blank line, which is the most common way this function is written wrong.

Rendering diagram…

What does a newline inside a paragraph mean?

It is a soft line break. A conforming parser may render it as a line ending or as a single space, because browsers collapse both to the same thing. The reference renderer keeps the newline; this course joins the lines with one space so a paragraph stays on one output line.

A hard line break is a real <br />. You ask for it at the end of a line, in one of two ways:

Line ending (before the next line)Result
roses are red + two or more spacesroses are red<br /> then a newline
roses are red + a backslashroses are red<br /> then a newline
roses are red + one spacesoft break: joined with a single space
roses are red + nothingsoft break: joined with a single space
two spaces, but on the last line of the paragraphtrailing spaces dropped, no <br />
a backslash on the last linestays a literal backslash

The last two rows are the trap. A break needs something after it to break into, so a paragraph cannot end in a dangling <br />. A worked example, with . standing for a space:

roses are red..            ->  <p>roses are red<br />
violets are blue..             violets are blue</p>

The second line also ends in two spaces, but it is the last line of the paragraph, so they are simply removed.

Whitespace at the edges of a line

The spec strips the leading spaces and tabs of every paragraph line, so an indented continuation reads the same as an unindented one. Trailing whitespace goes too, once you have decided whether it was a hard break.

Common mistakes

  • Writing an empty paragraph. Flushing without checking that you hold lines gives <p></p> for every blank stretch.
  • Forgetting the final flush. The last paragraph vanishes when the input ends without a blank line.
  • Treating a whitespace-only line as text. A line of three spaces is blank; testing only for the empty string glues two paragraphs together.
  • Breaking on the last line. Two trailing spaces at the end of a paragraph must not produce a <br />.

Your exercise

Group the input into paragraphs and print each one as <p>...</p>, applying the soft and hard break rules above. The starter reads the lines and prints whatever you return; you write the grouping and the joining. A paragraph with a hard break spans more than one output line, because the <br /> is followed by a newline. Input may use CRLF line endings; the starter's reader has already turned them into plain newlines.

Up nextSetext HeadingsBlock Elements

Discussion

Ask a question, share an insight, or help someone who’s stuck.

Sign in to post a comment or reply.

Loading…