How to add a code block to a markdown list
Summary
Adding a fenced code block to a list in Markdown can be tricky due to formatting rules. The article provides many examples of code blocks in Markdown lists, including explanations of exactly how the examples work.
Problems #
Adding a code block to a list in Markdown can be tricky due to formatting rules. Common problems include:
- Incorrect Indentation
Markdown requires code blocks within lists to be indented properly. See the examples below for detailed instructions. - Breaking the List Structure
If the code block is not indented enough, it may break the list or be interpreted as regular text instead of a code block. - Incorrect Use of Backticks
Forgetting to use triple backticks (```) for start and end markers can cause a fenced code block to render incorrectly. - Missing Blank Lines
Some Markdown renderers require a blank line before the code block for correct rendering. - Renderer Differences
Different Markdown engines (e.g., GitHub, Markdown-it) may handle code blocks in lists differently.
Examples #
Below you will find examples of how you can add code blocks to Markdown lists. The examples are divided into defined, fenced code blocks, e.g. JavaScript, Ruby, Python, Shell, etc. and undefined code blocks, which output plain text.
The ↵ characters in markdown examples denote line breaks.
Defined Fenced Code Block Examples #
A defined fenced (e.g., python, javascript, bash, html, css, etc.) code block should be indented 0 spaces from the list item’s marker (e.g., - , * or 1. ) along with triple backticks for defining the language for syntax highlighting.
The space ( ) is part of the item’s marker. Count from the space onwards.
Unordered List #
The markdown below, renders a definded code block, with python, bash, and html code, within an unordered list.
- Item 1↵
↵
```python↵
print("Python code block 1")↵
```↵
↵
- Item 1.1↵
↵
```bash↵
echo "Bash code block 1.1"↵
```↵
↵
- Item 1.1.1↵
↵
```html↵
<p>HTML code block 1.1.1</p>↵
```
Renders as:
Item 1
print("Python code block 1")Item 1.1
echo "Bash code block 1.1"Item 1.1.1
<p>HTML code block 1.1.1</p>
Ordered List #
The markdown below, renders a definded code block, with python, bash, and html code, within an ordered list.
1. Item 1↵
↵
```python↵
print("Python code block 1")↵
```↵
↵
1. Item 1.1↵
↵
```bash↵
echo "Bash code block 1.1"↵
```↵
↵
1. Item 1.1.1↵
↵
```html↵
<p>HTML code block 1.1.1</p>↵
```
Renders as:
Item 1
print("Python code block 1")Item 1.1
echo "Bash code block 1.1"Item 1.1.1
<p>HTML code block 1.1.1</p>
Plain Text Code Block Examples #
An undefined (plain text) code block should be indented at least four spaces from the list item’s marker (e.g., - , * or 1. ).
The space ( ) is part of the item’s marker. Count from the space onwards.
Unordered List #
The markdown below, renders an undefinded (plain text) code block within an unordered list.
- Item 1↵
↵
Plain text code block 1↵
↵
- Item 1.1↵
↵
Plain text code block 1.1↵
↵
- Item 1.1.1↵
↵
Plain text code block 1.1.1
Renders as:
Item 1
Plain text code block 1Item 1.1
Plain text code block 1.1Item 1.1.1
Plain text code block 1.1.1
Ordered List #
The markdown below, renders an undefinded (plain text) code block within an ordered list.
1. Item 1↵
↵
Plain text code block 1↵
↵
1. Item 1.1↵
↵
Plain text code block 1.1↵
↵
1. Item 1.1.1↵
↵
Plain text code block 1.1.1
Renders as:
Item 1
Plain text code block 1Item 1.1
Plain text code block 1.1Item 1.1.1
Plain text code block 1.1.1
Further readings #
Sources and recommended, further resources on the topic:
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
License: How to add a code block to a markdown list by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/instructions/how-to-add-a-code-block-to-markdown-list">How to add a code block to a markdown list</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the DITig legal page.
“Learning from conventions will make your site better.”
