Markdown Code Blocks

Master code display in Markdown. From inline code to syntax-highlighted blocks, learn how to present code beautifully.

Jump to Section

Inline Code

Display short code snippets within text using backticks.

Basic Inline Code

Markdown

Use the `console.log()` function to print output.

The `git status` command shows your repository status.

Preview

Use the console.log() function to print output.

The git status command shows your repository status.

Use single backticks to wrap inline code.

Code with Backticks

Markdown

To display backticks in code, use double backticks: ```code with backtick```

Preview

To display backticks in code, use double backticks: code with backtick

Use double backticks when your code contains single backticks.

Variables and Functions

Markdown

Set the `API_KEY` environment variable before running `npm start`.

Call the `getUserData()` function to fetch user information.

Preview

Set the API_KEY environment variable before running npm start.

Call the getUserData() function to fetch user information.

Inline code is perfect for variables, functions, and short commands.

Tips & Best Practices

Use inline code for variable names, function names, and short commands
Inline code stands out from regular text with different styling
Great for API documentation and technical writing
Use double backticks if your code contains single backticks

Code Blocks

Create multi-line code blocks using triple backticks or indentation.

Fenced Code Block

Markdown

```
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));
```

Preview

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));

Use triple backticks to create fenced code blocks.

Indented Code Block

Markdown

    function greet(name) {
        return "Hello, " + name + "!";
    }
    
    console.log(greet("World"));

Preview

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));

Indent lines with 4 spaces or 1 tab to create code blocks.

Mixed Code and Text

Markdown

Here's how to create a simple function:

```
function add(a, b) {
    return a + b;
}
```

You can then use it like this: `add(2, 3)`

Preview

Here's how to create a simple function:

function add(a, b) {
    return a + b;
}

You can then use it like this: add(2, 3)

Combine code blocks with inline code and regular text for tutorials.

Tips & Best Practices

Fenced code blocks (```) are more flexible than indented blocks
Code blocks preserve formatting and whitespace
Great for showing complete examples and longer code snippets
Can be used for any type of preformatted text, not just code

Syntax Highlighting

Add language specification for automatic syntax highlighting.

JavaScript

Markdown

```javascript
const user = {
    name: 'John Doe',
    age: 30,
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};

user.greet();
```

Preview

const user = {
    name: 'John Doe',
    age: 30,
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};

user.greet();

Specify "javascript" or "js" for JavaScript syntax highlighting.

Python

Markdown

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")
```

Preview

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Python code with proper syntax highlighting and comments.

HTML & CSS

Markdown

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <style>
        .highlight { color: blue; }
    </style>
</head>
<body>
    <h1 class="highlight">Hello World</h1>
</body>
</html>
```

```css
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
```

Preview

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <style>
        .highlight { color: blue; }
    </style>
</head>
<body>
    <h1 class="highlight">Hello World</h1>
</body>
</html>

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

HTML and CSS with proper tag and property highlighting.

Tips & Best Practices

Most Markdown processors support 100+ programming languages
Language names are usually case-insensitive
Syntax highlighting improves code readability significantly
Use "text" or omit language for plain text without highlighting

Supported Languages

Common programming languages and their identifiers for syntax highlighting.

Popular Languages

Markdown

```bash
# Bash/Shell
npm install markdown-it
git commit -m "Add new feature"
```

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}
```

```yaml
# YAML Configuration
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
```

Preview

# Bash/Shell
npm install markdown-it
git commit -m "Add new feature"

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

# YAML Configuration
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

Common languages: bash, json, yaml, xml, sql, etc.

Web Technologies

Markdown

```typescript
interface User {
    id: number;
    name: string;
    email: string;
}

function createUser(data: Partial<User>): User {
    return {
        id: Math.random(),
        name: data.name || 'Anonymous',
        email: data.email || ''
    };
}
```

```scss
$primary-color: #007bff;
$border-radius: 4px;

.card {
    background: white;
    border-radius: $border-radius;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    &:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
}
```

Preview

interface User {
    id: number;
    name: string;
    email: string;
}

function createUser(data: Partial<User>): User {
    return {
        id: Math.random(),
        name: data.name || 'Anonymous',
        email: data.email || ''
    };
}

$primary-color: #007bff;
$border-radius: 4px;

.card {
    background: white;
    border-radius: $border-radius;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    &:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
}

Modern web development languages: TypeScript, SCSS, JSX, etc.

Language Aliases

Markdown

<!-- These are equivalent -->
```js
// JavaScript
```

```javascript
// JavaScript (full name)
```

```py
# Python
```

```python
# Python (full name)
```

Preview

// JavaScript

// JavaScript (full name)

# Python

# Python (full name)

Many languages have short aliases: js/javascript, py/python, etc.

Tips & Best Practices

Common aliases: js (javascript), py (python), rb (ruby), sh (bash)
Use "diff" to show code changes with + and - lines
Use "plaintext" or "text" for code without syntax highlighting
Check your Markdown processor documentation for full language list

Advanced Code Block Features

Special features and techniques for enhanced code presentation.

Code with Line Numbers

Markdown

```javascript {.line-numbers}
1  function calculateTotal(items) {
2      let total = 0;
3      for (let item of items) {
4          total += item.price;
5      }
6      return total;
7  }
```

Preview

1  function calculateTotal(items) {
2      let total = 0;
3      for (let item of items) {
4          total += item.price;
5      }
6      return total;
7  }

Some processors support line numbers with special syntax.

Highlighted Lines

Markdown

```javascript {hl_lines=[2,4]}
function processData(data) {
    const result = data.map(item => {  // highlighted
        return {
            ...item,                   // highlighted
            processed: true
        };
    });
    return result;
}
```

Preview

function processData(data) {
    const result = data.map(item => {  // highlighted
        return {
            ...item,                   // highlighted
            processed: true
        };
    });
    return result;
}

Highlight specific lines to draw attention to important code.

Code with Title

Markdown

```javascript title="utils.js"
export function formatDate(date) {
    return new Intl.DateTimeFormat('en-US').format(date);
}

export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
```

Preview

export function formatDate(date) {
    return new Intl.DateTimeFormat('en-US').format(date);
}

export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

Add titles to show filenames or descriptions.

Diff/Changes

Markdown

```diff
function greet(name) {
-    return "Hello " + name;
+    return `Hello ${name}!`;
}
```

Preview

function greet(name) {
-    return "Hello " + name;
+    return `Hello ${name}!`;
}

Use "diff" language to show code changes.

Tips & Best Practices

Advanced features depend on your Markdown processor
GitHub, GitLab, and documentation sites often support extra features
Test advanced syntax in your target environment
Fallback gracefully when advanced features are not supported

← Back to Reference Try in Editor →

Markdown Cheat Sheet

Table of Contents

Markdown Code Blocks

Jump to Section

Inline Code

Basic Inline Code

Code with Backticks

Variables and Functions

Tips & Best Practices

Code Blocks

Fenced Code Block

Indented Code Block

Mixed Code and Text

Tips & Best Practices

Syntax Highlighting

JavaScript

Python

HTML & CSS

Tips & Best Practices

Supported Languages

Popular Languages

Web Technologies

Language Aliases

Tips & Best Practices

Advanced Code Block Features

Code with Line Numbers

Highlighted Lines

Code with Title

Diff/Changes

Tips & Best Practices