Markdown fenced code blocks

Triple backticks mean “start or end a fenced code block” in Markdown. Put three backticks (```) on their own line, add the code, then close the block with another line of three backticks. Add a language name after the opening fence, such as ```python, when you want syntax highlighting.

A fence may contain three or more backticks or tildes (~~~). The closing fence must use the same character and be at least as long as the opening fence.

Markdown fenced code blocks syntax reference

Markdown fenced code blocks key facts

• A fence is three or more backticks or three or more tildes on their own line, above and below the code.
• You cannot mix fence characters in one block: open and close with the same character.
• The closing fence must be at least as long as the opening fence and carries no info string.
• The first word of the info string is the language identifier. It drives syntax highlighting but does not affect whether the block renders.
• Nothing between the fences is parsed as Markdown, so asterisks, underscores, and pipes appear literally.
• To show a code block that itself contains triple backticks, wrap it in a longer fence, such as four backticks.
• Fenced code blocks are not in John Gruber's original Markdown. They are supported by CommonMark, GFM, MultiMarkdown, Markdown Extra, and Pandoc.

Choose a fence that cannot close early

Use at least three backticks or tildes to open and close a fenced code block. If the example contains a run of three backticks, wrap it with four or more backticks. The closing fence must use the same character as the opening fence and must be at least as long.

Add a language identifier only when it is correct. The identifier is metadata for the renderer, not part of the programming language. Unsupported or misspelled identifiers usually leave the code unhighlighted. Inside a list, align the fence with the list item's content column so the block remains inside that item. For short fragments within a sentence, use inline code instead.

Basic syntax

To create a fenced code block, put a line of three or more backticks, add your code on the lines below, then close it with a line of the same fence character.

Markdown

```
function greet(name) {
  return "Hello, " + name;
}
```

Rendered output

function greet(name) {
  return "Hello, " + name;
}

HTML output

<pre><code>function greet(name) {
  return "Hello, " + name;
}
</code></pre>

Text inside a fenced code block is never parsed as Markdown. Asterisks, underscores, and pipes all appear literally. This is what makes fenced blocks the right tool for showing code, configuration, or any text that should not be formatted.

Backtick fences and tilde fences

Both backticks and tildes work as fence characters. You cannot mix them: a block opened with backticks must close with backticks, and a block opened with tildes must close with tildes.

Markdown

~~~
Tilde fences work the same way.
~~~

Rendered output

Tilde fences work the same way.

The info string and language

The text after the opening fence is the info string. Its first word is treated as the language identifier, which renderers turn into a class on the <code> element and pass to a syntax highlighter. See syntax highlighting for how the language name drives colored output.

Markdown

```python
def add(a, b):
    return a + b
```

Rendered output

def add(a, b):
    return a + b

HTML output

<pre><code class="language-python">def add(a, b):
    return a + b
</code></pre>

The info string may not contain backticks when the fence itself is made of backticks, since a backtick would be read as part of the fence. A tilde fence has no such restriction. The info string is trimmed of surrounding whitespace, and anything after the first word is extra info that most renderers ignore. See code for inline code and indented code blocks.

Language identifiers are matched by the syntax highlighter, not by Markdown itself, and most highlighters accept common aliases and are case-insensitive. For example, js and javascript, py and python, sh and bash, and yml and yaml usually resolve to the same language. If a language is unknown to the highlighter, the block still renders as plain monospace code.

Pandoc attribute syntax

Pandoc lets you replace the bare language word with an attribute block in curly braces on the opening fence. This can set a class, an id, and other attributes, and is a Pandoc extension rather than portable Markdown.

Markdown

```{.python #example .numberLines}
def add(a, b):
    return a + b
```

The .python class sets the language, #example sets an id, and .numberLines asks Pandoc to number the lines. Plain renderers that do not support the attribute syntax may show it literally, so use it only when you target Pandoc.

Fence length and closing fences

A fence can be longer than three characters. The closing fence must be at least as long as the opening fence and use the same character. A closing fence may not have an info string.

In short, the closing fence must use the same character as the opening fence and be at least as long as it. If you open with four backticks, close with four or more backticks, never with a shorter run and never with tildes.

Markdown

````
A block opened with four backticks
is closed with four backticks.
````

Rendered output

A block opened with four backticks
is closed with four backticks.

Indenting the opening fence

In CommonMark and GFM, the opening fence may be indented up to three spaces. That leading indentation is then removed from each content line by the same amount, which keeps the code aligned. Indent the fence four or more spaces and it becomes an indented code block instead, with the backticks shown as literal text.

Markdown

   ```js
   console.log("indented up to three spaces");
   ```

Rendered output

console.log("indented up to three spaces");

Nesting fences

To show a fenced code block inside another fenced code block, which is common when documenting Markdown itself, make the outer fence longer than any fence inside it. Four backticks on the outside safely wrap a three backtick block on the inside.

Markdown

````markdown
Here is a nested example:

```js
console.log("hello");
```
````

Rendered output

Here is a nested example:

```js
console.log("hello");
```

Empty language and plain fences

Leaving the info string blank produces a plain code block with no language class. This is the right choice for output logs, plain text, or anything with no specific language.

Markdown

```
$ npm install markdific
added 1 package in 1s
```

Rendered output

$ npm install markdific
added 1 package in 1s

Fenced blocks inside lists and blockquotes

Fenced code blocks can sit inside list items and blockquotes. Indent the fence to align with the list item content, or prefix each line with > inside a blockquote.

Markdown

1. Install the package:

   ```bash
   npm install markdific
   ```

2. Run it.

Rendered output

Flavor differences

Fenced code blocks are widely supported, but they are not universal across every historical parser. Classic Markdown, John Gruber's original, did not have fenced blocks at all: it only supported indented code blocks. Every modern flavor below supports fences.

Classic Markdown supported only indented code blocks, so fenced blocks are an extension relative to the 2004 original. CommonMark standardized fences and the info string, GFM follows CommonMark exactly, and Markdown Extra was the first to use tildes. Pandoc adds an attribute syntax on the opening fence, where you can write a class and other attributes in curly braces instead of a bare language word.

Other platforms (Slack, Discord, Reddit, Obsidian, Notion)

• Slack: triple backticks create a code block, but Slack ignores the language identifier and applies no syntax highlighting.
• Discord: triple backticks with a language name do apply syntax highlighting in the desktop and web clients.
• Reddit: supports fenced code blocks in the newer editor. Older Markdown mode used four-space indentation instead.
• Obsidian and Notion: both support fenced blocks with a language identifier and syntax highlighting.

For the full comparison of how flavors differ across all elements, see Markdown flavors.

How Markdific renders it

Markdific renders fenced code blocks with syntax highlighting, using the language identifier from the info string to color the code. Syntax highlighting for fenced code blocks is a confirmed Markdific feature. Blocks with no language render as plain monospace code.

Try it in the Markdific online editor.

Common mistakes and gotchas

• Mixing fence characters. A block opened with backticks must close with backticks. Opening with backticks and closing with tildes leaves the block open.
• Closing fence too short. If you open with four backticks, close with at least four. A three backtick line will not close a four backtick block.
• Backticks in the info string. When the fence is made of backticks, the language word cannot contain a backtick. Use a tilde fence if you need one.
• Forgetting to close the fence. An unclosed fence turns the rest of the block into code. Always add the closing line.
• Expecting Markdown inside the block. Content between fences is literal. Bold, links, and lists inside a code block appear as raw text, which is the point.
• Wrong indentation inside a list. A fence inside a list item must be indented to line up with the item content, or it can break out of the list.

Best practices

• Use backtick fences by default. Switch to tilde fences only when the code contains a run of backticks.
• Add an accurate language identifier when highlighting would help. Leave it blank for plain text, logs, or unknown languages.
• Match the closing fence to the opening fence in both character and length.
• For nested examples, make the outer fence longer than any inner fence.
• Add a blank line before and after the block so it separates cleanly from surrounding text.
• Prefer fenced blocks over indented code blocks. Fences are clearer and support a language identifier.

HTML equivalent

A fenced code block compiles to a <pre> wrapping a <code> element. When a language is set, the language name appears as a class on the <code> element, which is what a highlighter targets.

Markdown

```css
body {
  margin: 0;
}
```

HTML output

<pre><code class="language-css">body {
  margin: 0;
}
</code></pre>

FAQ

How do you create a code block in Markdown? Put a line of three backticks, add your code below, then close it with another line of three backticks. Optionally add a language name after the opening backticks, for example the word python.

What is the difference between backtick and tilde fences? They work the same way, but you cannot mix them in one block. Tilde fences are handy when your code contains backticks, because the tilde fence will not be closed early by an inner backtick run.

How do you show a code block inside a code block in Markdown? Make the outer fence longer than the inner one. If the inner block uses three backticks, wrap it in four backticks so the outer fence is not closed early.

What is the info string in a fenced code block? It is the text after the opening fence. The first word is the language identifier, which renderers add as a class on the code element and pass to a syntax highlighter.

Do fenced code blocks work in classic Markdown? No. John Gruber's original Markdown only supported indented code blocks. Fenced code blocks are an extension standardized by CommonMark and used by GFM, MultiMarkdown, Markdown Extra, and Pandoc.

Is Markdown parsed inside a fenced code block? No. Everything between the fences is treated as literal text. Asterisks, underscores, and pipes are shown exactly as typed with no formatting applied.

What HTML does a fenced code block produce? It produces a pre element wrapping a code element. When a language is set, the language name is added as a class on the code element.

How many backticks do you need for a code block? At least three. Three backticks is the standard. You can use more, such as four or five, which is useful when the code you are showing itself contains a run of three backticks. The closing fence must match or exceed the opening length.

Does the closing fence have to match the opening fence? Yes. The closing fence must use the same character as the opening fence, backticks for backticks or tildes for tildes, and be at least as long as it. A shorter run, or a run of the other character, does not close the block.

How do you add a language to a code block? Put the language name directly after the opening fence, with no space, for example three backticks followed by the word python. The first word is the language identifier that drives syntax highlighting.

How do you show triple backticks in Markdown? Wrap them in a longer fence. To display a three-backtick block as literal text, surround it with a four-backtick or five-backtick fence, so the outer fence is not closed early. Inside inline text, use a longer run of backticks around the shorter run.

Does syntax highlighting work in every Markdown flavor? The language identifier is standardized, but the coloring is done by a separate highlighter, so it depends on the renderer. GitHub, GitLab, Obsidian, and most doc tools highlight; plain CommonMark ships no highlighter, and Slack ignores the language entirely.

Can you indent a fenced code block? Yes, the opening fence may be indented up to three spaces, and that indentation is stripped from the content. Four or more spaces turns it into an indented code block instead, showing the fence characters literally.

Sources and compatibility references

• CommonMark 0.31.2: fenced code blocks
• GitHub: creating and highlighting code blocks

Use these primary references for syntax rules. Renderer behaviour can still vary by version and configuration, so preview important documents in their final destination.

Related pages

• Markdown documentation hub
• Syntax highlighting
• Inline code and code blocks
• Lists in Markdown
• Blockquotes in Markdown
• Markdown flavors compared