Markdown Code Block Generator
Pick a block type and a language, paste your code, and copy a highlighted Markdown code block. Everything runs locally in your browser.
How do you create a code block in Markdown?
Wrap your code in triple backticks on their own lines, and put the language name directly after the opening fence. The language identifier is what switches on syntax highlighting. For a short snippet inside a sentence, use single backticks instead. Four-space indentation also creates a code block, but it cannot carry a language.
```python
print("Hello, Markdown!")
```Renders as a fenced code block with Python syntax highlighting, and compiles to <pre><code class="language-python">.
Try the Markdown Code Block Generator
Settings
Output
Markdown code block syntax explained
Markdown has three ways to show code: fenced blocks, indented blocks and inline spans. Fenced blocks are the modern default because they are the only ones that accept a language identifier.
Fenced code block with a language
Three backticks open the block, three close it, and the language name goes immediately after the opening fence with no space. This is the form GitHub, GitLab, Obsidian, Discord and every static site generator understand.
```javascript
export function slugify(title) {
return title.toLowerCase().replace(/\s+/g, "-");
}
```A highlighted JavaScript block. Without the language tag the same code renders as plain, unhighlighted text.
Language identifiers for syntax highlighting
The identifier is just a short name the highlighter recognises. These are the ones you will reach for most often; GitHub accepts more than 200 through its Linguist library, including aliases such as js, ts, py, sh, yml, cs and c++.
```javascript ```typescript ```python ```java
```c ```cpp ```csharp ```go
```rust ```swift ```kotlin ```php
```ruby ```bash ```sql ```json
```yaml ```html ```css ```diffEach name selects a different grammar. Unknown identifiers are not an error — the renderer simply falls back to unhighlighted text.
Indented code block (four spaces)
Indenting every line by four spaces or one tab is the original Markdown code block, from before fences existed. It still works everywhere, but it accepts no language and breaks as soon as your code contains its own indentation.
int main(void) {
printf("Hello, Markdown!\n");
return 0;
}A plain, unhighlighted code block. The four leading spaces are stripped from every line.
Inline code inside a sentence
Single backticks mark a short span of code inside running text — a variable, a flag, a command. Use double backticks as the delimiter when the span itself contains a backtick.
Run `npm run build` before deploying.
The `` ` `` character opens an inline code span.The first line shows npm run build in monospace; the second displays a literal backtick without ending the span.
Diff blocks for showing changes
The diff identifier colours lines by their first character: minus for removals, plus for additions, space for untouched context. It is the cleanest way to show a patch in a README or pull request comment.
```diff
- const timeout = 1000;
+ const timeout = 5000;
retry(request, { timeout });
```GitHub and GitLab tint the removed line red and the added line green; the unchanged line stays neutral.
Escaping backticks and nesting fences
To show a fenced block inside a fenced block, make the outer fence longer than the inner one. Four backticks can contain three, five can contain four, and so on.
````markdown
```js
console.log("this fence stays visible");
```
````The inner triple backticks are printed literally instead of closing the block early.
Where Markdown code blocks work
Fenced blocks are near-universal, but the size of the language list and the extras built on top of it vary a lot between platforms.
| Platform | Support | Notes |
|---|---|---|
| GitHub / GitLab | Full | 200+ languages via Linguist, diff colouring, and collapsible blocks inside <details>. |
| Discord | Full | ```lang works in messages, limited to the languages highlight.js ships with. |
| Slack | Partial | ``` creates a code block, but the language tag is ignored and nothing is highlighted. |
| Obsidian | Full | Prism-based highlighting, plus code blocks that render as diagrams, e.g. mermaid. |
| Notion | Full | Typing ``` converts to a code block; the language is then set from a dropdown. |
| Full | Fenced blocks work in the current editor; old.reddit.com needs four-space indentation. | |
| VS Code | Full | Highlighted in the Markdown preview and inside the editor itself. |
How to make a code block in Markdown
Choose a block type
Pick a fenced block for anything multi-line, an indented block for legacy Markdown processors, or inline code for a snippet inside a sentence.
Select a language
Choose the language identifier that matches your code so the renderer applies syntax highlighting. Leave it as plain text for logs and console output.
Add a filename (optional)
For fenced blocks, type a filename to emit a title attribute — useful when a snippet belongs to a specific file in a tutorial.
Paste your code and copy
Paste the code into the editor, check the preview tab, then copy the Markdown, or switch to the HTML tab if you need <pre><code> markup.
Frequently Asked Questions
How do I create a code block in Markdown?
Put three backticks on the line before your code and three backticks on the line after it. Add a language name straight after the opening fence, such as python or javascript, to turn on syntax highlighting. Indenting every line by four spaces also produces a code block, but it cannot carry a language.
How do I specify a language in a Markdown code block?
Write the identifier immediately after the opening triple backticks, with no space between them, for example ```python. The identifier is case-insensitive on most renderers. Indented code blocks have nowhere to put a language, which is the main reason fenced blocks are preferred.
What languages are supported in Markdown code blocks?
The list depends on the renderer. GitHub recognises more than 200 through its Linguist library. The identifiers you will use most are javascript, typescript, python, java, c, cpp, csharp, go, rust, swift, kotlin, php, ruby, bash, powershell, sql, json, yaml, toml, html, css, xml, markdown and diff. Common aliases such as js, ts, py, sh, yml and cs also work.
What is the language identifier for C in Markdown?
Use c for C, cpp for C++ and csharp for C#. GitHub also accepts the aliases c++ and cs. Because the identifier is only a hint to the highlighter, an unrecognised name is never an error — the block simply renders without colouring.
What is the difference between fenced and indented code blocks?
Fenced blocks use triple backticks and accept a language identifier, a filename and other metadata, so they support syntax highlighting. Indented blocks use four spaces per line, come from the original 1.0 Markdown spec, and support none of that. Indented blocks are still handy inside list items, where a fence can confuse older parsers.
How do I escape backticks inside a code block?
Make the fence longer than the backtick run you want to display. Four backticks can wrap a block that contains three, and five can wrap one that contains four. For inline code, use double backticks as the delimiter and leave a space next to the content, so that a single backtick inside stays visible.
How do I show a diff in Markdown?
Use diff as the language identifier, then prefix removed lines with a minus sign, added lines with a plus sign, and leave unchanged lines starting with a space. GitHub, GitLab and most GitHub Flavored Markdown renderers colour the result red and green automatically.
How do I add a filename to a Markdown code block?
There is no single standard. GitHub and many documentation themes read a title attribute after the language, as in ```js title="app.js". VuePress uses ```js:app.js, and some Jekyll setups use fileName="app.js". Renderers that do not understand the extra text ignore it, so the block still displays correctly.
Can you add line numbers to Markdown code blocks?
Not in plain Markdown. Line numbers come from the syntax highlighter, not the Markdown spec, so they depend on the platform. Prism and highlight.js both offer line-number plugins, and site generators such as Hugo, MkDocs and Docusaurus expose a setting for them. GitHub does not render line numbers inside code blocks.
How do I put a code block inside a list item?
Indent the whole fenced block to line up with the text of the list item, usually by four spaces for a numbered list or two for a bullet, and keep a blank line before and after it. Without that indentation the fence ends the list and the block escapes to the top level.