Code in Markdown

Markdown has two ways to mark something as code: backticks around a few words inside a sentence, and a fenced block for anything longer. The block form also carries a language name, which is what turns on syntax highlighting in previews, in exports and on GitHub.

Run `npm install` first, then edit `vite.config.js`.

```js
function greet(name) {
  return `Hi, ${name}`
}
```

    Four spaces of indent
    also makes a code block.

function greet(name) {
  return `Hi, ${name}`
}

Four spaces of indent
also makes a code block.

Inline code

Wrap it in single backticks. Use it for filenames, commands, function names, keys, values — anything the reader might type or copy.

Inside a code span, Markdown stops interpreting: *not italic* stays literal asterisks. That makes inline code the simplest way to show syntax without escaping it.

Fenced code blocks

Three backticks on their own line, the code, three backticks to close. Put the language right after the opening fence:

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

def greet(name):
    return f"Hi, {name}"

The language name is what a highlighter reads. Common ones: js, ts, python, bash, json, yaml, html, css, sql, swift, go, rust, diff. An unknown name is harmless — you get an unhighlighted block.

Leave the language off and you still get a code block, just without colours. Add it anyway: it costs four characters and it is what makes a long block readable.

Tildes work too

~~~ opens and closes a fence exactly like backticks:

~~~sql
SELECT * FROM documents WHERE pinned = 1;
~~~

This is useful when the code you are showing itself contains three backticks.

Showing backticks

To show a backtick inside inline code, wrap the span in more backticks than the content uses, with a space on each side:

Use `` ` `` for inline code.

Use ``` `` ``` for a span that contains a backtick.

The same idea scales to blocks: to show a three-backtick fence, wrap it in four. That is how every example on this page is written.

The four-space form

Indenting a block by four spaces also makes it code. It is the original 2004 syntax, it still works everywhere, and it has two real drawbacks: it cannot carry a language, and it is easy to trigger by accident when you indent something for readability.

Fences are better in almost every case. The one place indentation still wins is inside a list item, where it composes more predictably.

Diff blocks

Naming diff as the language gives you red and green lines, which is the clearest way to show a change:

```diff
- const md = new MarkdownIt({ html: true })
+ const md = new MarkdownIt({ html: false })
```

- const md = new MarkdownIt({ html: true })
+ const md = new MarkdownIt({ html: false })

Common mistakes

Forgetting to close the fence. Everything after the opening fence becomes code until the end of the document. If a page suddenly turns monospaced, this is why.

A language name with a space. ```java script is not JavaScript. The language is the first word only.

Fences inside a list at the wrong indent. A fenced block inside a list item must be indented to line up with the item’s text, or the list ends at the fence.

Using inline code for emphasis. Backticks mean “this is code”, not “this is important”. Use **bold** for emphasis — screen readers and search engines treat them differently.

FAQ

How do I add a code block in Markdown?

Put three backticks on their own line, your code underneath, and three backticks to close. Add a language name straight after the opening fence — ```python — to get syntax highlighting.

How do I show a backtick in Markdown?

Wrap the span in more backticks than it contains and put a space inside each end: ` renders a single backtick. For a whole fenced block, open and close with four backticks instead of three.

What languages can I use for syntax highlighting?

That depends on the highlighter behind your renderer, but the common names — js, python, bash, json, html, css, sql, swift, go, rust, yaml, diff — are supported almost everywhere. An unrecognised name simply renders without colours.

What is the difference between fenced and indented code blocks?

Fenced blocks are delimited by ``` or ~~~ and can name a language; indented blocks are any lines indented by four spaces and cannot. Fences are clearer and are what modern documents use, but indentation composes more reliably inside list items.

Why is my whole page rendering as code?

An unclosed fence. Search for a ``` that has no matching partner — everything after it is treated as code until the file ends.