How do I make a code block on GitHub?

Put three backticks on the line before and after your code. Add a language name after the opening backticks for syntax highlighting, for example ```python.

How do I show three backticks inside a code block?

Fence the block with four backticks instead of three — the inner three backticks then render literally.

GitHub Markdown Code Block Generator

Fenced code blocks with GitHub syntax highlighting, diff mode, and collapsible sections

Language (Linguist identifier)

Diff mode — highlight added (+) and removed (-) linesCollapsible — wrap in <details> / <summary>

Code

Contains triple backticks? The fence automatically switches to four backticks.

Markdown

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

Preview

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

Fenced vs Indented Code Blocks

GitHub Markdown supports two code block styles. The original indented style requires four spaces at the start of every line and offers no syntax highlighting. Fenced blocks — a line of three backticks before and after the code — are what you should use on GitHub: they need no re-indenting when pasting, accept a language identifier for highlighting, and are easier to read in the raw source. Tildes (~~~) work as fences too, but backticks are the near-universal convention.

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

Syntax Highlighting with Linguist

GitHub's highlighting is powered by Linguist, the same open-source library that produces the language statistics bar on every repository. Put a Linguist language name or alias immediately after the opening fence: javascript (or js),typescript (or ts), python(or py), csharp, cpp, bash,yaml, dockerfile, and hundreds more. Linguist matching is case-insensitive, and unknown identifiers simply fall back to plain text, so there is no risk in guessing.

Diff Highlighting

Use diff as the language to show changes with colored lines: lines starting with - render red (removed) and lines starting with + render green (added). This is the clearest way to propose a change in an issue or code review comment without opening a pull request.

```diff - const port = 3000; + const port = process.env.PORT ?? 3000; ```

Collapsible Code with <details>

Long logs or config dumps can overwhelm a README or issue. Wrap the fenced block in the HTML <details> element with a <summary> label and GitHub renders a click-to-expand section. The blank line between the summary tag and the code fence is required — without it GitHub treats the block as raw HTML content and skips Markdown rendering.

<details> <summary>Show full log</summary> ```text ...hundreds of lines... ``` </details>

Escaping Backticks and Inline Code

To display a code block that itself contains triple backticks — for example, when documenting Markdown — fence it with four backticks instead of three. The outer four-backtick fence treats everything inside as literal text. For short fragments inside a sentence, use single backticks for inline code; if the fragment contains a backtick, wrap it in double backticks with a space, like `` `code` ``.

````markdown ```js console.log('nested fence'); ``` ````

Embedding Code Permalinks in Issues

You often don't need to copy code at all. On any file view in GitHub, click a line number (or shift-click to select a range), open the "..." menu, and choose "Copy permalink". Paste that URL on its own line in an issue or pull request comment and GitHub expands it into a live, syntax-highlighted snippet linked to the exact commit — so the reference stays accurate even after the file changes.

Frequently Asked Questions

How do I create a code block in GitHub Markdown?

Wrap your code in a pair of triple backticks (```), each on its own line. Add a language identifier right after the opening fence — for example ```python — and GitHub applies syntax highlighting automatically.

How does GitHub decide which syntax highlighting to apply?

GitHub uses its open-source Linguist library. The identifier after the opening fence is matched against Linguist language names and aliases (js works as well as javascript). With no identifier, the block renders as plain unstyled text.

How do I show a diff with red and green lines?

Use diff as the language identifier and prefix removed lines with a minus (-) and added lines with a plus (+). GitHub colors removals red and additions green — perfect for showing before/after changes in issues and PRs.

How do I put a code block inside a code block?

Use four backticks (````) for the outer fence. Anything inside, including triple-backtick fences, is treated as literal text. This is the standard way to document Markdown itself.

How do I make a collapsible code block on GitHub?

Wrap the fenced block in the HTML details and summary elements. Keep a blank line between the summary tag and the opening fence, or GitHub will not render the Markdown inside.

How do I embed a snippet from a file in an issue or PR?

Browse to the file on GitHub, click a line number (shift-click to select a range), choose "Copy permalink", and paste the URL into an issue or PR comment. GitHub expands it into a rendered, syntax-highlighted snippet automatically.

What is the difference between inline code and a code block?

Inline code uses single backticks around a short fragment inside a sentence, like a variable name. Code blocks are fenced multi-line sections with optional highlighting. Use inline code for identifiers and blocks for anything spanning a full line or more.