Sharing code snippets cleanly is essential for writing high-quality developer tutorials, reference guides, and technical documentation. Markdown provides two distinct methods for presenting code: inline formatting for short phrases and fenced code blocks for multi-line scripts. This guide explains how to use both, apply syntax highlighting for different programming languages, and adopt best practices for developer readability.
Key Takeaways
- Format inline code using single backticks for commands, variable names, and file paths.
- Create multi-line code blocks by wrapping code in triple backticks on separate lines.
- Enable syntax highlighting by adding a language identifier (e.g., javascript) directly after the opening backticks.
- Never leave code blocks untagged — a language tag is required to enable syntax highlighting.
How to Format Inline Code in Markdown?
Inline code is used to highlight short references within a sentence, such as a variable name, file path, terminal command, or function name. To format inline code, wrap the text in single backticks `.
Use the `print()` function to display output.
Run `npm install` to install dependencies.
The config file is stored at `~/.bashrc`.This renders directly in the text flow:
Use the print() function to display output.
Run npm install to install dependencies.
The config file is stored at ~/.bashrc.
The HTML equivalent generated by the compiler:
Use the <code>print()</code> function to display output.How to Create Fenced Code Blocks in Markdown?
For multi-line examples, scripts, or config files, use a fenced code block. Create a code block by placing triple backticks ``` on a line by themselves before and after your code.
```
function greet(name) {
return "Hello, " + name;
}
```This renders as a separate, pre-formatted block:
function greet(name) {
return "Hello, " + name;
}The HTML equivalent:
<pre><code>function greet(name) {
return "Hello, " + name;
}</code></pre>How to Enable Syntax Highlighting?
Most modern Markdown engines (including GitHub and Astro) support syntax highlighting. To enable it, append the language identifier (e.g., javascript, python, bash, html) immediately after the opening triple backticks.
Here is a JavaScript code block with highlighting:
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```And a Python code block:
```python
def greet(name):
return f"Hello, {name}!"
```And a Terminal / Bash script block:
```bash
npm install
npm run dev
```They render with color-coded syntax matching their language rules:
function greet(name) {
return `Hello, ${name}!`;
}def greet(name):
return f"Hello, {name}!"npm install
npm run devAlways specify the language tag next to the opening backticks. Without it, most renderers (including GitHub and Astro) fall back to plain, unhighlighted text — the tag is what tells the highlighter which grammar rules to apply.
What is the Indented Code Block Syntax?
The original Markdown specification allowed creating code blocks by simply indenting lines with four spaces or one tab.
// This is an indented code block
console.log("Hello!");While still supported, this method is deprecated in modern technical writing because it does not support syntax highlighting, makes copy-pasting difficult, and is easy to trigger accidentally.
Always write a sentence or two explaining the code block before you present it. Avoid ending a section or article directly with a code block, as it creates a poor reading experience for developers.
Summary Checklist
- Use single backticks for short inline code references.
- Use triple backticks on separate lines to frame multi-line code blocks.
- Add language tags directly after opening backticks for syntax highlighting.
- Avoid indented code blocks (4 spaces) in favor of fenced blocks.
- Write brief explanations before every code block.
Frequently Asked Questions
What language tags are supported?
Almost all common programming languages and config formats are supported, including javascript, typescript, python, go, rust, html, css, bash, json, yaml, xml, and markdown.
How do I show backticks inside inline code?
If your inline code snippet contains a literal backtick, wrap the code block using double backticks `` instead of single ones, and leave a single space on the inside.
Can I highlight specific lines in a code block?
Standard Markdown does not support line highlighting. However, advanced Markdown systems like MDX and integrations (like Shiki or Prism) often allow line-highlighting extensions using metadata tags (e.g., ```js {2-4}).
What to Read Next
- Tables in Markdown - Create & Format Data — Structure technical comparisons and data using clean Markdown tables.
- Markdown Cheat Sheet: Syntax, Tables, and Extended Features — A comprehensive reference for standard and extended GFM features.
Related Articles
Deepen your understanding with these curated continuations.
Autolinks in Markdown: Bare URLs and Emails
Learn the difference between CommonMark's angle-bracket autolinks and GitHub-Flavored Markdown's extended autolinks for bare URLs and email addresses.
Definition Lists in Markdown
Learn the Markdown Extra-style definition list syntax for terms and descriptions, useful for glossaries and API documentation, plus which tooling supports it.
Escaping Special Characters in Markdown
Learn how to escape asterisks, underscores, brackets, and other special characters in Markdown so they display as literal text instead of triggering formatting.
