Markdown Code Blocks: Inline Code, Fences and Syntax Highlighting
By the MDConverter team · Updated · 2 min read
Quick answer
Wrap short code in single backticks for inline code (`npm install`), and put three backticks on the lines above and below a block of code to make a code block. Add a language name right after the opening backticks — ```python — to get syntax highlighting. Everything inside code is shown exactly as typed: Markdown symbols are not interpreted.
Inline code
Use single backticks for commands, file names, function names and values inside a sentence.
Run `npm install` and then open `src/index.ts`.
Set `debug: true` — the `**` here is not bold: `**kwargs`.Run npm install and then open src/index.ts.
Set debug: true — the ** here is not bold: **kwargs.
Fenced code blocks
Three backticks (or three tildes ~~~) on their own line open and close the block. Indentation and blank lines inside are kept.
```
function greet(name) {
return "Hello, " + name;
}
```function greet(name) {
return "Hello, " + name;
}Syntax highlighting: the language name
Write the language identifier straight after the opening fence. Renderers use it to color the code (GitHub uses Linguist; many sites use highlight.js, Prism or Shiki).
```python
def total(items):
return sum(item.price for item in items)
```def total(items):
return sum(item.price for item in items)Common identifiers (most tools accept the aliases in brackets):
| Language | Identifier |
|---|---|
| JavaScript / TypeScript | js (javascript), ts (typescript), jsx, tsx |
| Python | python (py) |
| Shell | bash, sh, shell, powershell |
| Web | html, css, scss |
| Data and config | json, yaml (yml), toml, xml, ini |
| Others | sql, go, rust, java, csharp (cs), cpp, php, ruby, kotlin, swift |
| Markdown itself | markdown (md) |
| Plain text, no highlighting | text or plaintext |
Showing changes with diff
The diff language colors lines starting with + and -, which is useful for showing what changed.
```diff
- const timeout = 1000;
+ const timeout = 5000;
```- const timeout = 1000;
+ const timeout = 5000;Showing backticks inside code
Use more backticks on the outside than appear inside. For inline code containing a backtick, wrap it in double backticks with spaces; for a code block that contains a fence, use four backticks (or tildes) as the outer fence.
Use `` `code` `` for inline code.
````markdown
```js
console.log("a fence inside a fence");
```
````Use `code` for inline code.
```js
console.log("a fence inside a fence");
```Indented code blocks (the old way)
Lines indented by four spaces are also a code block in standard Markdown. Avoid this style: it cannot carry a language name, and indentation inside lists makes it ambiguous. Fenced blocks are clearer and supported everywhere modern.
Code when converting Markdown
Markdown to HTML highlights code blocks with highlight.js; Markdown to Word keeps each line in a monospace font on a light background so nothing wraps unexpectedly; Markdown to PDF keeps code blocks together on the page. For a shareable picture of a snippet, use Markdown to image.
Code formatting by app
| App | Supported | Notes |
|---|---|---|
| GitHub / GitLab | Yes | Hundreds of languages via Linguist, plus diff, mermaid and geojson blocks. |
| Discord | Yes | Inline and fenced code with highlighting for common languages. |
| Slack | Partly | Inline code and ``` blocks, but no syntax highlighting. |
| Partly | Fenced blocks in new Reddit; old Reddit needs 4-space indentation. | |
| Notion | Yes | ```lang creates a code block with a language picker. |
| Partly | ``` makes monospace text; inline since 2024. No highlighting. |
Common mistakes and how to fix them
| Problem | Fix |
|---|---|
| Code block never closes | The closing fence must use the same character and at least as many as the opening fence, on its own line. |
| No colors appear | Add a language after the opening fence, and check your renderer recognises that identifier. |
| Code inside a list breaks the list | Indent the whole fenced block to the list item’s text, with blank lines around it. |
| Smart quotes appear in pasted code | Your editor or chat app replaced quotes. Copy from the code block’s copy button or the raw file. |
Tools for this
Frequently Asked Questions About Code blocks & inline code
Comprehensive answers to common technical, formatting, security, and compatibility questions.
Related reading
- Markdown Escape Characters: How to Show *, _, # and | Literally — Show *, _, #, | and other symbols literally — with a free escape and unescape tool.
- Markdown Lists: Bullet Points, Numbered Lists and Nested Lists — Bullets, numbered lists, nesting, starting numbers and the indentation rules that trip people up.
- Markdown Flavors: CommonMark vs GitHub Flavored Markdown and More — Why the same Markdown renders differently, and what each major flavor adds.