How to write and fix fenced code blocks in Markdown

Write a three-line example

In a scratch Markdown file, type the following three lines. The first line uses tildes and names Python. The middle line is the sample code.

1. ~~~python
2. print("Draft ready")
3. ~~~

Check where the code block ends

Below the closing fence, type “Next step is review.” on a new line. Preview the file and check that this sentence appears as regular text after the code block.

Remove the closing line and preview again. In this example, the sentence becomes part of the code block. CommonMark keeps the block open through the end of this file. Restore the closing line. If you accidentally close a tilde fence with backticks or with too few tildes, the fence is still open.

If your example itself contains a line of three tildes, use four tildes for the outer opening and closing fences. That gives the inner line room to appear as literal code.

Add a language identifier when it helps

The word python after the opening tildes is the language identifier. Renderers can use it to apply language highlighting. Try removing only that word and preview again. The block boundaries stay in place. The destination controls the colors.

Source highlighting can help you see the fence while writing. Rendered highlighting depends on the destination. Check the displayed block when you paste a snippet into a README or documentation page.

Check the saved file in FlowMD

FlowMD documents syntax highlighting in the editor and code blocks in its Finder previews. Save the scratch file, select it in Finder and press Space. Check that the code line stays inside the block and the sentence below stays outside it. The boundary is visible even in a single-color preview.

Questions