Markdown Code Block: Syntax & Highlighting Guide

Inline Code

Wrap text in single backticks to mark it as code within a sentence. This is used for variable names, short commands, file paths, and any fragment that should appear in a monospace font.

Run `npm install` to install dependencies.

Escaping Backticks Inside Inline Code

If the code itself contains a backtick, use double backticks as the delimiter with a space after the opening and before the closing pair:

Use `` code with `backtick` inside `` when needed.

Fenced Code Blocks

For multi-line code, use triple backticks (```) on the lines before and after the code. Add a language identifier after the opening backticks to enable syntax highlighting.

JavaScript

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Python

```python
def greet(name):
    return f"Hello, {name}!"
```

Bash

```bash
#!/bin/bash
echo "Current directory: $(pwd)"
ls -la --color=auto
```

JSON

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "private": true
}
```

HTML

```html
<nav class="sidebar">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
```

The language tag after the opening backticks tells the renderer which grammar to use for coloring keywords, strings, comments, and other tokens. Without a tag, the block renders as plain monospace text with no highlighting.

Indented Code Blocks

Indent every line by four spaces (or one tab) to create a code block without backticks:

    const x = 42;
    console.log(x);

This is the original Markdown method. It still works everywhere, but fenced blocks are preferred because they support syntax highlighting and are easier to read in source. Use indented blocks only when you need compatibility with very old parsers.

Common Language Identifiers

The table below lists popular language tags you can place after the opening ```. Most renderers accept both the full name and the short alias.

If the identifier is not recognized, the block renders as plain monospace text — no error is thrown.

Diff Syntax

Use ```diff to highlight added and removed lines. Prefix added lines with + and removed lines with -:

```diff
 function greet(name) {
-  return "Hello, " + name;
+  return `Hello, ${name}!`;
 }
```

Lines starting with + are typically rendered in green, lines starting with - in red. Lines with no prefix (or a leading space) appear as unchanged context. This is useful in pull request descriptions and changelogs to show exactly what changed.

Code Blocks in Lists

To place a fenced code block inside a list item, indent the entire block so it aligns with the list content. For a standard list item (hyphen + space), that means 4 spaces of indentation:

1. Install the package:

    ```bash
    npm install markdown-it
    ```

2. Import it in your code:

    ```javascript
    import MarkdownIt from 'markdown-it';
    const md = new MarkdownIt();
    ```

For nested lists (second level), the code block needs 8 spaces of indentation. The key rule: the opening ``` must be indented to the same level as the list item’s text content. If the indentation is wrong, the code block breaks out of the list.

Common Mistakes

Forgetting the closing fence:

```python
def hello():
    print("Hi")

Everything below becomes part of the code block
because the closing ``` is missing.

Always add a closing ``` on its own line. Without it, the rest of the document is swallowed into the code block.

Wrong or misspelled language identifier:

```javasript
const x = 1;
```

The typo (javasript instead of javascript) won’t cause an error, but highlighting will not be applied. The block renders as plain text.

Insufficient indentation in lists:

1. Step one:
  ```bash
  echo "hello"
  ```

Two spaces is not enough — use four spaces (or one tab) so the fence aligns with the list item’s text. Otherwise the code block may break the list structure.

Platform Support

Fenced code blocks with syntax highlighting are supported by all major Markdown platforms:

Slack supports single backtick for inline code and triple backticks for code blocks, but does not apply syntax highlighting based on a language identifier. Discord handles both inline code and fenced blocks with highlighting.

FAQ

How do I create a code block in Markdown?

Wrap your code in triple backticks (```) on separate lines above and below. For inline code within a sentence, wrap the text in single backticks (`code`). You can also indent lines by four spaces, but fenced code blocks with triple backticks are the modern standard.

How do I add syntax highlighting?

Add a language identifier immediately after the opening triple backticks — for example, ```javascript or ```python. The renderer uses this tag to apply language-specific color highlighting. Most platforms support dozens of languages. See the language identifiers table for a full list.

Can I nest code blocks?

Yes. Use four backticks (````) for the outer fence and three backticks (```) for the inner fence. The outer fence must always use more backticks than any inner fence. This is useful when documenting Markdown syntax itself — for example, showing how to write a fenced code block inside a tutorial.

Preview Your Code with MDViewer

MDViewer renders fenced code blocks with syntax highlighting for 180+ languages. Open any .md file from Finder and see your code rendered with proper coloring, line spacing, and monospace fonts — no configuration required.

Requires macOS 13.0 or later. Intel and Apple Silicon.