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.
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 devWhat 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.
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.
