Markdown Code Blocks — Syntax Highlighting and Fenced Code

Markdown code blocks preserve whitespace and display monospaced text. Fenced code blocks (triple backticks) also enable syntax highlighting by specifying a language identifier.

Use the Markdown Preview to see syntax highlighting in real-time.

Inline code

Single backticks for inline code within a sentence:

Use `console.log()` to debug JavaScript values.
The `--verbose` flag enables detailed output.

Renders as: Use console.log() to debug JavaScript values.

For code that contains backticks, use double backticks:

`` Use `backticks` like this ``

Fenced code blocks

Triple backticks create a code block:

```
code goes here
  whitespace preserved
```

With a language identifier for syntax highlighting:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

function greet(name) {
  return `Hello, ${name}!`;
}

Language identifiers

Common language identifiers:

Language	Identifier
JavaScript	javascript or js
TypeScript	typescript or ts
Python	python or py
Bash/Shell	bash or sh
SQL	sql
CSS	css
HTML	html
JSON	json
YAML	yaml or yml
Markdown	markdown or md
Go	go
Rust	rust
Java	java
C/C++	c or cpp
Ruby	ruby or rb
PHP	php
Swift	swift
Kotlin	kotlin
Dockerfile	dockerfile
XML	xml

Practical examples

Shell commands

```bash
# Install dependencies:
npm install

# Run development server:
npm run dev

# Build for production:
npm run build && npm run preview
```

Configuration files

```yaml
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
```

Terminal output

```
$ git status
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
```

No language identifier for plain terminal output.

Diff output

```diff
- const old = 'value';
+ const new = 'updated value';
```

The diff language shows red/green for additions and deletions.

Indented code blocks (alternative syntax)

Four spaces of indentation also creates a code block (original Markdown spec):

This is a paragraph.

    This is a code block
    because it's indented 4 spaces.

Back to paragraph.

Fenced code blocks are generally preferred because they:

• Don’t conflict with indentation in lists
• Support language identifiers
• Are easier to read with syntax highlighting

GitHub Flavored Markdown extensions

GitHub adds useful features to code blocks:

File name annotation

Some renderers support file name hints:

```javascript title="app.js"
const express = require('express');
```

Line highlighting (some renderers)

```javascript {3}
function example() {
  const a = 1;
  const b = 2;  // Line 3 is highlighted
  return a + b;
}
```

Mermaid diagrams

GitHub renders Mermaid diagrams inside code blocks:

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

Escaping code blocks in Markdown

To show backtick code inside a code block, use more backticks:

````markdown
```javascript
// This is a nested code block
```
````

Four backticks surround a block containing three-backtick examples.

HTML output

Fenced code blocks render to:

<pre><code class="language-javascript">
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

The language-* class follows the CommonMark spec and is used by syntax highlighters like Prism.js and highlight.js.

Syntax highlighting in static sites

For static site generators, add a syntax highlighter:

Astro:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-dark',
    },
  },
});

Next.js (with rehype-highlight):

import rehypeHighlight from 'rehype-highlight';

const options = {
  mdxOptions: {
    rehypePlugins: [rehypeHighlight],
  },
};

Related tools

• Markdown Preview — preview Markdown with syntax highlighting
• Markdown Cheatsheet — complete syntax reference
• Markdown Tables Guide — table syntax