Markdown Code Blocks
Code blocks are essential for technical documentation, tutorials, and any content that includes code examples. Markdown provides several ways to format code, from simple inline code to full code blocks with syntax highlighting.
Inline Code
For short code snippets within sentences, use single backticks:
Use the `git status` command to check your repository.
The `console.log()` function prints to the console.
Press `Ctrl+C` to stop the process.
Result:
Use thegit status
command to check your repository.
The console.log()
function prints to the console.
Press Ctrl+C
to stop the process.
Fenced Code Blocks
For multi-line code, use triple backticks:
```
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
```
Result:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
Syntax Highlighting
Add the language name after the opening backticks for syntax highlighting:
JavaScript
```javascript
function calculateSum(a, b) {
return a + b;
}
const result = calculateSum(5, 3);
console.log(result); // Output: 8
```
Python
```python
def calculate_sum(a, b):
return a + b
result = calculate_sum(5, 3)
print(result) # Output: 8
```
Popular Language Identifiers
Language | Identifier | Alternative |
---|---|---|
JavaScript | javascript | js |
Python | python | py |
Java | java | |
C++ | cpp | c++ |
C# | csharp | cs |
HTML | html | |
CSS | css | |
SQL | sql | |
JSON | json | |
XML | xml | |
Shell | bash | sh |
TypeScript | typescript | ts |
React JSX | jsx | |
PHP | php | |
Go | go | |
Rust | rust | |
Swift | swift |
Important Notes
Fenced code blocks are the preferred method for formatting code in Markdown as they provide better syntax highlighting and are more widely supported across different platforms.
Best Practices
1. Always Use Syntax Highlighting
❌ No syntax highlighting:
```
if (user.isLoggedIn) {
showDashboard();
} else {
showLoginForm();
}
```
✅ With syntax highlighting:
```javascript
if (user.isLoggedIn) {
showDashboard();
} else {
showLoginForm();
}
```
2. Keep Code Examples Focused
❌ Too much irrelevant code:
```javascript
// Lots of setup code...
const express = require('express');
const app = express();
const PORT = 3000;
// ... more setup ...
// The actual example (buried in setup)
app.get('/api/users', (req, res) => {
res.json({ users: [] });
});
// ... more boilerplate ...
```
✅ Focused on the important part:
```javascript
// Create a simple API endpoint
app.get('/api/users', (req, res) => {
res.json({ users: [] });
});
```
Common Use Cases
API Documentation
Request:
POST /api/users
Content-Type: application/json
{
"name": "John Doe",
"email": "[email protected]"
}
Response:
{
"id": 123,
"name": "John Doe",
"email": "[email protected]",
"created_at": "2024-01-15T10:30:00Z"
}
Configuration Files
Create a.env
file in your project root:
# Database configuration
DB_HOST=localhost
DB_PORT=5432
DB_NAME=myapp
DB_USER=postgres
DB_PASSWORD=password123
# API Keys
API_KEY=your_api_key_here
SECRET_KEY=your_secret_key_here
Troubleshooting
Common Issues
- Code not formatting: Check for proper backticks
- Syntax highlighting not working: Verify language identifier
- Code breaking layout: Use proper line breaks
Escaping Backticks
If you need to show backticks in your code:Single backtick example:
- •Write: `code`
- •Result:
code
- •Write: ```code block```
- •Result:
code block
- •Write: ``backtick``
- •Result:
backtick
Finally, let's learn about line breaks to perfect your text formatting.