Markdown Code/Code Blocks

Code

You can denote a word or phrase as code, enclose it in backticks `.

Syntax:

`word or phrase`

Markdown	HTML	Output
This is `code` text.	<p>This is <code>code</code> text.</p>	This is `code` text.

Example

This is `code` text.

Try this code ❯

Escaping Backticks

If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks ``.

Syntax:

``word `or` phrase``

Markdown	HTML	Output
``This is `code` text.``	<code>This is `code` text.</code>	This is `code` text.

Example

``This is `code` text.``

Try this code ❯

Code Blocks

You can create code blocks by indent every line of the block by at least four spaces or one tab.

Syntax:

    Code Blocks

Markdown	HTML	Output
<p>This is code blocks.</p>	<p>This is code blocks.</p>	<p>This is code blocks.</p>

Note: Always remember to add at least four spaces or one tab otherwise it act as normal line instead of code blocks.

Example

    <!DOCTYPE html>
    <html>
    <head>
      <title>Code Blocks</title>
    </head>
    <body>
      <p>This is paragraph</p>
    </body>
    </html>

Try this code ❯

Code Fencing Block

The basic Markdown syntax allows you to create code blocks by indenting lines by four spaces or one tab.

You can use fenced code blocks by use three backticks ``` or three tildes ~~~ on the lines before and after the code block.

It is depends on your Markdown processor or editor, and you don’t have to indent any lines!

Syntax:

```

Code Blocks

```

or

~~~

Code Blocks

~~~

Example

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

Try this code ❯

If you don't want to indent this would be great option:

Example

```html
<!DOCTYPE html>
<html>
<head>
  <title>Code Blocks</title>
</head>
<body>
  <p>This is paragraph</p>
</body>
</html>
```

Try this code ❯

Code Block Highlighting

There are many Markdown processors support syntax highlighting for fenced code blocks.

This feature allows you to add color highlighting for whatever language your code was written in.

To add syntax highlighting, specify a language next to the backticks before the fenced code block, for example html, javascript, css, json and many more it's depends on your markdown editor.

Syntax:

```language

Code Blocks

```

or

~~~

Code Blocks

~~~

Example

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

Try this code ❯

Note - Not all Markdown applications support this, so it is not a great option from a compatibility perspective.