> ## Content Index
> Fetch the complete content index at: https://itsfoss.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Adding Code Block in Markdown
- URL: https://itsfoss.com/markdown-code-block/
- Published: 2023-02-07T05:52:46.000Z
- Updated: 2025-08-04T13:41:34.000Z
- Description: Learn all about adding code blocks in Markdown. Learn about adding inline code, multi-line code and code block with syntax highlight.
- Author: Abhishek Prakash
- Tags: Markdown

Markdown is an excellent markup language. Once you learn the [common Markdown syntax](https://itsfoss.com/markdown-guide/), you can create web-focused documents that render beautifully.

If you are creating a technical documentation that involves providing code snippets, you can add code blocks in Markdown so that it stands out and is easier for people to follow.

## How do you add code blocks in Markdown?

There are multiple ways to do that actually. If you indent a line with four spaces or one tab and it will turn into a code block. Another way is to use three backticks (\`\`\`). You start the code block with three backticks and end it with three backticks. Anything in between is displayed in a code block. You can also use three tildes (\~\~\~) instead of backticks (\`\`\`).

You can also add inline code with backticks. If you put anything between single backtick (\` \`), it is displayed as an inline code. Here's an example: `sudo apt update`

Markdown also supports syntax highlighting for a number of programming languages.

Let me show all this in detail.

### Add code blocks with 4 spaced or 1 tab

Nah! I am not trying to start the space vs tab debate here. To add a code block, start a new line with either four spaces or one tab.

Any subsequent line that starts with four spaces or a tab is part of the same code block.

![Adding code blocks in Markdown with tabs and spaces](https://itsfoss.com/content/images/2023/02/markdown-code-block-with-spaces-tabs.png)

Example of code block in Markdown (click to enlarge)

📋

One important thing to note here is that the code lines should start in a new paragraph. You add paragraphs in Markdown by pressing enter key twice.

All the lines that start with four spaces or tab will be part of the same code block. 

### Add code blocks with three backticks

To add a new code block, you enter three backticks (\`\`\`) in a new line. Type the code and end it with three backticks (\`\`\`). Anything in between is displayed in a code block.

Here's an example:

![Adding code blocks in Markdown with three backticks](https://itsfoss.com/content/images/2023/02/markdown-code-block-with-backticks.png)

Example of code block in Markdown (click to enlarge)

As you can see, no need for a paragraph break or indenting the lines.

The same can be achieved with three tildes (\~\~\~) but I prefer the backticks as it is more widely accepted and it also allows syntax highlighhting.

### Add code syntax highlighting

Markdown supports syntax highlighting for a number of programming languages. C, C++, JavaScript, Java, HTML, Python, SQL, XML, YAML or just some of the examples.

To add syntax highlighting, you need to add the programming language info with the back-ticks like this:

```
``` cpp
bool getBit(int num, int i) {
    return ((num & (1<<i)) != 0);
}
```
```

See it in action in this screenshot:

![Syntax highlighted code blocks in Markdown](https://itsfoss.com/content/images/2023/02/markdown-code-block-with-syntax-highlight.png)

Syntax highlighted code blocks in Markdown (click to enlarge)

The syntax highlighting depends on the editor you use. On the web, it may not always be rendered properly.

You can [refer to this page](https://github.com/jincheng9/markdown%5Fsupported%5Flanguages?ref=itsfoss.com) for getting the programming langauge codes to be used in the syntax highlighting.

### Add inline codes

Inline codes are an integral part of technical documentation. Unlike the code blocks, they are not confined in a box. Instead, they are part of the normal text but highlighted a bit so that they stand out.

The simple example is this word `code` that I wrote by adding single backticks (\`) before and after the word code. You can see that the word code is shown in a different shade than the rest.

## Code red or code blue?

This is all the essentials you need to know about adding code blocks in Markdown. Keep forgetting the syntax? Use this cheat sheet:

[Download Markdown Syntax Cheatsheet](https://itsfoss.com/content/files/2023/01/Markdown-Cheat-Sheet.pdf)

If you want more details, we have a pretty good [beginner's guide to Markdown](https://itsfoss.com/markdown-guide/) for that as well.

[Basic Markdown Syntax Explained \[With Free Cheat Sheet\]Learning markdown could help you a lot with writing for web. Here’s a complete beginner’s guide to Markdown syntax with downloadable cheat sheet.![](https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png)It's FOSSBill Dyer![](https://itsfoss.com/content/images/wordpress/2021/04/markdown.png)](https://itsfoss.com/markdown-guide/)

I hope you find this helpful in adding codes to your Markdown document. Let me know if you need any help.