Syntax Reference
Markdown Code Blocks
Markdown has 3 code formats: fenced blocks (triple backticks) and indented blocks (4 spaces) become <pre><code>, while inline backticks become <code>. A language label adds a highlighting class.
Key facts
- Fenced syntax
- 3 backticks ``` or 3 tildes ~~~
- Indented syntax
- 4 spaces or 1 tab per line
- Block output
- <pre><code> element pair
- Inline output
- Single backticks → <code>
How do you write a code block in Markdown?
A Markdown code block uses 3 backticks (```) on a line above and below the code, or 4 spaces of indentation. Both convert to a <pre><code> element pair that preserves whitespace and line breaks.
Markdown defines 3 code formats: fenced blocks, indented blocks, and inline code. Fenced blocks are the most common because they accept a language label for highlighting. To convert a full block to HTML instantly, use Markdown Code Block to HTML, or browse all elements in the Markdown Syntax Guide.
The opening and closing fences are not shown in the output; only the code between them is rendered.
```
const x = 1;
```<pre><code>const x = 1;
</code></pre>What is a fenced code block?
A fenced code block wraps code in 3 backticks (```) or 3 tildes (~~~) above and below. It converts to <pre><code> and, unlike indented blocks, accepts a language label on the opening fence for syntax highlighting.
Backticks and tildes are interchangeable as fences. Use tildes when your code itself contains a line of backticks, so the fence is not closed early.
~~~
const x = 1;
~~~<pre><code>const x = 1;
</code></pre>How does the language label work?
A language label is the word placed directly after the opening fence, such as ```js. It converts to class="language-js" on the <code> tag, which a syntax highlighter like Prism targets to colour keywords, strings, and comments.
Common labels include js, python, bash, html, and json. Without a label, the block still converts to <pre><code> but renders as plain, uncoloured text.
```python
print("hi")
```<pre><code class="language-python">print("hi")
</code></pre>How do indented code blocks differ from fenced ones?
An indented code block uses 4 spaces (or 1 tab) before each line instead of fences. It converts to the same <pre><code> pair but cannot carry a language label, so it never receives syntax highlighting.
Indented blocks predate fenced blocks and need a blank line before them. Fenced blocks are preferred because they read more clearly and support highlighting.
const x = 1;<pre><code>const x = 1;
</code></pre>How do you write inline code in Markdown?
Inline code wraps a short snippet in single backticks within a sentence. It converts to a <code> element nested in the surrounding <p>, formatting the snippet in monospace without breaking it onto its own line.
To include a literal backtick inside inline code, wrap the snippet in 2 backticks: ``a `b` c``.
Run `npm test` first.<p>Run <code>npm test</code> first.</p>How are characters escaped inside a code block?
Characters inside a code block are escaped, so <, >, and & become <, >, and & in the HTML. This keeps tags as literal text, so a fenced block of HTML displays the code instead of rendering it.
No Markdown formatting is processed inside code blocks either: backticks, asterisks, and brackets all appear verbatim. For a one-line reference of every element, see the Markdown Cheat Sheet.
```
<a href="#">link</a>
```<pre><code><a href="#">link</a>
</code></pre>Frequently Asked Questions
- What is the difference between inline code and a code block?
- Inline code uses single backticks and converts to a <code> element inside a sentence. A code block uses triple backticks or 4-space indentation and converts to a block-level <pre><code> pair that preserves line breaks.
- Do backticks or tildes both work as code fences?
- Yes. Both 3 backticks (```) and 3 tildes (~~~) open and close a fenced code block. Tildes are useful when the code itself contains a line of backticks that would otherwise close the fence early.
- Why is my code block not getting syntax highlighting?
- Highlighting needs a language label after the opening fence, such as ```js. Indented 4-space blocks cannot carry a label, and a missing or unsupported language name produces plain <pre><code> without colour.
- How do I show a backtick inside inline code?
- Wrap the snippet in 2 backticks instead of one, for example ``code with a `backtick` ``. The doubled fence lets a single literal backtick appear inside the resulting <code> element.