Markdown code blocks

Backticks mark code. One pair for inline code, three on their own lines for a block. Add a language after the opening fence for colours.

Run `npm install` first.

```js
const greet = (name) => `Hello, ${name}!`
console.log(greet('Forge'))
```

```diff
- old line
+ new line
```

    Four-space indent also makes a code block.

Inline code

Wrap a word or short snippet in single backticks: `npm run build`. Markdown inside is not processed, so * and _ stay literal.

Fenced code blocks

Put three backticks (or three tildes ~~~) on a line before and after the code. Fences are part of CommonMark and GitHub Flavored Markdown and are clearer than the older four-space indent.

Syntax highlighting

Write the language right after the opening fence: ```python, ```bash, ```json, ```diff. The renderer (GitHub uses Linguist; this site uses highlight.js) picks the colours. Unknown languages render as plain code.

Backticks inside code

Use a longer run of backticks outside than inside. For inline code containing one backtick, wrap it in two with spaces: `` a ` b ``. To show a fenced block inside a fenced block, make the outer fence four backticks or use tildes.

Code blocks inside lists

Indent the fence to line up with the list item’s text (usually 3 spaces after 1. or 2 after -) and leave a blank line before it, otherwise the list ends.

Diagrams in code blocks

On GitHub, GitLab and in this site’s editor, a block tagged mermaid renders as a diagram. Try it in the Mermaid live editor.

Quick answers

How do I add syntax highlighting to a Markdown code block?
Add the language name right after the opening three backticks, for example ```js or ```python.
What is the difference between ``` and ~~~?
Nothing in output. Both open a fenced block in CommonMark; tildes are handy when the code itself contains triple backticks.
Why does my code block show as normal text?
The fence is probably indented inconsistently, missing a blank line before it inside a list, or the closing fence is shorter than the opening one.