Markdown Code Block Generator
Generate markdown code blocks with the right language tag, preview syntax highlighting and copy highlighted HTML for blogs. Free, no signup.
```javascript
function greet(name) {
// Say hello
const message = `Hello, ${name}!`;
return message;
}
console.log(greet("world"));
```function greet(name) {
// Say hello
const message = `Hello, ${name}!`;
return message;
}
console.log(greet("world"));What Is a Markdown Code Block?
A markdown code block is a span of text that a renderer shows verbatim in a monospace box instead of interpreting it as markdown. The fenced form, three backticks with an optional language tag, is what GitHub, GitLab, Discord, Slack posts, Notion and every static site generator use, and the language tag is what turns on syntax colouring. This code block generator wraps your code in the right fence, adds the tag, and previews it with the same highlight.js engine that many sites use.
It also solves the awkward cases: code that itself contains backticks, diffs, a filename line, and a code highlighter online for blogs that cannot run JavaScript. Highlighting is done in your browser.
How to Generate a Code Block
- Paste the code or open a file.
- Select the language, or leave Auto detect on and check the detected name in the preview header.
- Choose backticks, tildes or the 4-space indent style. Tildes are useful when the code has backticks.
- Optionally add a filename (written as a comment on the first line), turn on Diff mode, or wrap the block in a GitHub alert.
- Pick the output: markdown, highlighted HTML with CSS, or escaped HTML, then copy or download it.
Code Block Syntax Reference
| Form | Syntax | Notes |
|---|---|---|
| Fenced, backticks | ```js … ``` | Most common; language tag enables highlighting. |
| Fenced, tildes | ~~~js … ~~~ | Same behaviour; safe when code contains backticks. |
| Longer fence | ````md … ```` | Contains a three-backtick block inside. |
| Indented | code | Four spaces per line; no language tag possible. |
| Inline | `code` | Single backticks inside a sentence. |
| Diff | ```diff + added - removed | Green and red lines on GitHub and GitLab. |
Using the Syntax Highlighter Online for Blogs
Many blog platforms and email tools render markdown but do not colour code. The Highlighted HTML output acts as a syntax highlighter online: it runs highlight.js in your browser and emits a <pre class="hljs"> block whose tokens are wrapped in hljs-keyword, hljs-string and similar spans, plus a 20-line stylesheet in the GitHub light or dark palette. Paste it into a raw HTML block and the colours appear without any script. The escaped HTML output is the alternative when the site has its own highlighter and just needs < and & escaped.
Tips for a Readable Markdown Code Block
Always add the language tag to a markdown code block, even for shell snippets (bash) and config files (yaml, toml); it is the difference between coloured and grey text on GitHub. Keep lines under 80 characters so the block does not scroll horizontally on mobile, and put the filename in a comment on the first line when a page shows several files. For screenshots of code with a window frame and shadow, use the code to image converter instead.
Frequently Asked Questions
How do I write a markdown code block?
Put three backticks on their own line, the language name straight after them, your code on the following lines, and three more backticks to close. A markdown code block written as ```python … ``` is highlighted as Python on GitHub, GitLab, Stack Overflow, Discord and most blogs. Indenting every line by four spaces also creates a code block, but without a language tag.
What if my code contains three backticks?
Use a longer fence. Four backticks open and close a block that can contain three-backtick sequences, which is how you show a markdown example inside markdown. The generator lengthens the fence automatically when it detects backticks in your code.
Which language names work in the tag?
Any highlight.js or Linguist name or alias: js, javascript, ts, py, python, sh, bash, yml, yaml, jsonc and so on. The list here covers the 40 most common. Use Auto detect if you are unsure; it runs highlight.js highlightAuto in your browser and reports the language it picked.
How do I show a diff in a code block?
Tag the block as diff and start removed lines with - and added lines with +. Renderers colour them red and green. Diff mode in the generator prefixes unchanged lines with a space so the alignment stays correct.
Can I get highlighted HTML for a blog that has no highlighter?
Yes. Switch the output to Highlighted HTML + CSS. You get a <pre><code> block with highlight.js spans and a small embedded stylesheet in the GitHub light or dark palette, so it renders correctly with no JavaScript on the page. Line numbers can be included.