Expressive Code Features

This post demonstrates the powerful features available in Expressive Code, a syntax highlighting and code presentation plugin for Astro.

Syntax Highlighting

Expressive Code provides beautiful syntax highlighting for multiple programming languages. Below, each feature shows its markdown usage and the output:

JavaScript Example

Usage:

1
```js
2
function greet(name) {
3
  const message = `Hello, ${name}!`;
4
  console.log(message);
5
  return message;
6
}
7

8
greet('World');
9
```

Output:

1
function greet(name) {
2
  const message = `Hello, ${name}!`;
3
  console.log(message);
4
  return message;
5
}
6

7
greet('World');

Python Example

Usage:

1
```python
2
def calculate_fibonacci(n):
3
    if n <= 1:
4
        return n
5
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
6

7
# Generate first 10 Fibonacci numbers
8
for i in range(10):
9
    print(f"F({i}) = {calculate_fibonacci(i)}")
10
```

Output:

1
def calculate_fibonacci(n):
2
    if n <= 1:
3
        return n
4
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
5

6
# Generate first 10 Fibonacci numbers
7
for i in range(10):
8
    print(f"F({i}) = {calculate_fibonacci(i)}")

Editor & Terminal Frames

Editor Frame

Usage:

1
```js title="app.js"
2
const express = require('express');
3
const app = express();
4
const PORT = 3000;
5

6
app.get('/', (req, res) => {
7
  res.send('Hello from Express!');
8
});
9

10
app.listen(PORT, () => {
11
  console.log(`Server running on port ${PORT}`);
12
});
13
```

Output:

1
const express = require('express');
2
const app = express();
3
const PORT = 3000;
4

5
app.get('/', (req, res) => {
6
  res.send('Hello from Express!');
7
});
8

9
app.listen(PORT, () => {
10
  console.log(`Server running on port ${PORT}`);
11
});

Terminal Frame

Usage:

1
```bash frame="terminal"
2
# Install dependencies
3
npm install
4

5
# Run the development server
6
npm run dev
7

8
# Build for production
9
npm run build
10
```

Output:

1
# Install dependencies
2
npm install
3

4
# Run the development server
5
npm run dev
6

7
# Build for production
8
npm run build

ANSI Colors in Terminal

Usage:

1
```ansi
2
ANSI colors:
3
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
4
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
5
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m
6

7
256 colors (showing colors 160-177):
8
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
9
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
10
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m
11

12
Full RGB colors:
13
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m
14

15
Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m
16
```

Output:

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

Text & Line Markers

Highlighting Specific Lines

Usage:

1
```js {3-5}
2
function processData(data) {
3
  // Validate input
4
  if (!data || data.length === 0) {
5
    throw new Error('Data cannot be empty');
6
  }
7

8
  // Process the data
9
  return data.map(item => item.value * 2);
10
}
11
```

Output:

1
function processData(data) {
2
  // Validate input
3
  if (!data || data.length === 0) {
4
    throw new Error('Data cannot be empty');
5
  }
6

7
  // Process the data
8
  return data.map(item => item.value * 2);
9
}

Marking Additions and Deletions

Usage:

1
```js ins={3} del={2}
2
function calculateTotal(items) {
3
  return items.reduce((sum, item) => sum + item.price, 0);
4
  return items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
5
}
6
```

Output:

1
function calculateTotal(items) {
2
  return items.reduce((sum, item) => sum + item.price, 0);
3
  return items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
4
}

Multiple Line Markers

Usage:

1
```typescript {1, 8-10} ins={4-6} del={2}
2
import { defineConfig } from 'astro/config';
3
import react from '@astrojs/react';
4
import vue from '@astrojs/vue';
5
import svelte from '@astrojs/svelte';
6
import preact from '@astrojs/preact';
7
import solid from '@astrojs/solidjs';
8

9
export default defineConfig({
10
  integrations: [svelte(), preact(), solid()],
11
});
12
```

Output:

1
import { defineConfig } from 'astro/config';
2
import react from '@astrojs/react';
3
import vue from '@astrojs/vue';
4
import svelte from '@astrojs/svelte';
5
import preact from '@astrojs/preact';
6
import solid from '@astrojs/solidjs';
7

8
export default defineConfig({
9
  integrations: [svelte(), preact(), solid()],
10
});

Text Markers with Labels

Usage:

1
```js "useState" "useEffect" /count\w+/
2
import { useState, useEffect } from 'react';
3

4
function Counter() {
5
  const [count, setCount] = useState(0);
6
  const [countDouble, setCountDouble] = useState(0);
7

8
  useEffect(() => {
9
    setCountDouble(count * 2);
10
  }, [count]);
11

12
  return (
13
    <div>
14
      <p>Count: {count}</p>
15
      <p>Double: {countDouble}</p>
16
      <button onClick={() => setCount(count + 1)}>Increment</button>
17
    </div>
18
  );
19
}
20
```

Output:

1
import { useState, useEffect } from 'react';
2

3
function Counter() {
4
  const [count, setCount] = useState(0);
5
  const [countDouble, setCountDouble] = useState(0);
6

7
  useEffect(() => {
8
    setCountDouble(count * 2);
9
  }, [count]);
10

11
  return (
12
    <div>
13
      <p>Count: {count}</p>
14
      <p>Double: {countDouble}</p>
15
      <button onClick={() => setCount(count + 1)}>Increment</button>
16
    </div>
17
  );
18
}

Word Wrap

Word Wrap Feature

Usage:

1
```js wrap
2
const veryLongString = "This is an extremely long string that would normally extend far beyond the visible area of a code block, but with word wrap enabled, it will automatically wrap to the next line to ensure all content remains visible without horizontal scrolling.";
3

4
const anotherLongLine = someFunction(parameter1, parameter2, parameter3, parameter4, parameter5, parameter6, parameter7, parameter8, parameter9, parameter10);
5
```

Output:

1
const veryLongString = "This is an extremely long string that would normally extend far beyond the visible area of a code block, but with word wrap enabled, it will automatically wrap to the next line to ensure all content remains visible without horizontal scrolling.";
2

3
const anotherLongLine = someFunction(parameter1, parameter2, parameter3, parameter4, parameter5, parameter6, parameter7, parameter8, parameter9, parameter10);

Line Numbers

With Line Numbers (Default)

Usage:

1
```js showLineNumbers
2
class TodoList {
3
  constructor() {
4
    this.todos = [];
5
  }
6

7
  addTodo(text) {
8
    const todo = {
9
      id: Date.now(),
10
      text: text,
11
      completed: false
12
    };
13
    this.todos.push(todo);
14
    return todo;
15
  }
16

17
  removeTodo(id) {
18
    this.todos = this.todos.filter(todo => todo.id !== id);
19
  }
20

21
  toggleTodo(id) {
22
    const todo = this.todos.find(todo => todo.id === id);
23
    if (todo) {
24
      todo.completed = !todo.completed;
25
    }
26
  }
27
}
28

29
const myList = new TodoList();
30
myList.addTodo('Learn Astro');
31
myList.addTodo('Build a website');
32
```

Output:

1
class TodoList {
2
  constructor() {
3
    this.todos = [];
4
  }
5

6
  addTodo(text) {
7
    const todo = {
8
      id: Date.now(),
9
      text: text,
10
      completed: false
11
    };
12
    this.todos.push(todo);
13
    return todo;
14
  }
15

16
  removeTodo(id) {
17
    this.todos = this.todos.filter(todo => todo.id !== id);
18
  }
19

20
  toggleTodo(id) {
21
    const todo = this.todos.find(todo => todo.id === id);
22
    if (todo) {
23
      todo.completed = !todo.completed;
24
    }
25
  }
26
}
27

28
const myList = new TodoList();
29
myList.addTodo('Learn Astro');
30
myList.addTodo('Build a website');

Without Line Numbers

Usage:

1
```js showLineNumbers=false
2
// Simple utility functions
3
const formatDate = (date) => {
4
  return new Intl.DateTimeFormat('en-US').format(date);
5
};
6

7
const capitalize = (str) => {
8
  return str.charAt(0).toUpperCase() + str.slice(1);
9
};
10

11
const debounce = (func, wait) => {
12
  let timeout;
13
  return (...args) => {
14
    clearTimeout(timeout);
15
    timeout = setTimeout(() => func(...args), wait);
16
  };
17
};
18
```

Output:

// Simple utility functions
const formatDate = (date) => {
  return new Intl.DateTimeFormat('en-US').format(date);
};

const capitalize = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

Custom Starting Line Number

Usage:

1
```js startLineNumber=42
2
function searchArray(arr, target) {
3
  let left = 0;
4
  let right = arr.length - 1;
5

6
  while (left <= right) {
7
    const mid = Math.floor((left + right) / 2);
8
    if (arr[mid] === target) return mid;
9
    if (arr[mid] < target) left = mid + 1;
10
    else right = mid - 1;
11
  }
12

13
  return -1;
14
}
15
```

Output:

42
function searchArray(arr, target) {
43
  let left = 0;
44
  let right = arr.length - 1;
45

46
  while (left <= right) {
47
    const mid = Math.floor((left + right) / 2);
48
    if (arr[mid] === target) return mid;
49
    if (arr[mid] < target) left = mid + 1;
50
    else right = mid - 1;
51
  }
52

53
  return -1;
54
}

Blockquote with attribution

Syntax

1
```markdownxp
2
> Don't communicate by sharing memory, share memory by communicating.
3
> — <cite>Rob Pike[^1]</cite>
4
```

Output

“Don’t communicate by sharing memory, share memory by communicating.

— Rob Pike”

Multiple Features Combined

Usage:

1
```typescript title="config/database.ts" {8-12} ins={15-17} showLineNumbers
2
import { Pool } from 'pg';
3

4
interface DatabaseConfig {
5
  host: string;
6
  port: number;
7
  database: string;
8
  user: string;
9
  password: string;
10
  max: number;
11
  idleTimeoutMillis: number;
12
  connectionTimeoutMillis: number;
13
}
14

15
const config: DatabaseConfig = {
16
  host: process.env.DB_HOST || 'localhost',
17
  port: parseInt(process.env.DB_PORT || '5432'),
18
  database: process.env.DB_NAME || 'myapp',
19
  user: process.env.DB_USER || 'admin',
20
  password: process.env.DB_PASSWORD || '',
21
  max: 20,
22
  idleTimeoutMillis: 30000,
23
  connectionTimeoutMillis: 2000,
24
};
25

26
export const pool = new Pool(config);
27
```

Output:

1
import { Pool } from 'pg';
2

3
interface DatabaseConfig {
4
  host: string;
5
  port: number;
6
  database: string;
7
  user: string;
8
  password: string;
9
  max: number;
10
  idleTimeoutMillis: number;
11
  connectionTimeoutMillis: number;
12
}
13

14
const config: DatabaseConfig = {
15
  host: process.env.DB_HOST || 'localhost',
16
  port: parseInt(process.env.DB_PORT || '5432'),
17
  database: process.env.DB_NAME || 'myapp',
18
  user: process.env.DB_USER || 'admin',
19
  password: process.env.DB_PASSWORD || '',
20
  max: 20,
21
  idleTimeoutMillis: 30000,
22
  connectionTimeoutMillis: 2000,
23
};
24

25
export const pool = new Pool(config);

Conclusion

Expressive Code provides a rich set of features that make code presentation in your documentation and blog posts both beautiful and functional. These features help readers understand code better by highlighting important sections, showing context with filenames, and maintaining readability with proper formatting.

For inline code examples, you can use single backticks like console.log(), npm install, or const variable = 'value'. This should show as styled inline code blocks.

Try experimenting with these features in your own Astro projects!

Benkyou

Author

Expressive Code Features Guide

Expressive Code Features

Syntax Highlighting

JavaScript Example

Python Example

Editor & Terminal Frames

Editor Frame

Terminal Frame

ANSI Colors in Terminal

Text & Line Markers

Highlighting Specific Lines

Marking Additions and Deletions

Multiple Line Markers

Text Markers with Labels

Word Wrap

Word Wrap Feature

Line Numbers

With Line Numbers (Default)

Without Line Numbers

Custom Starting Line Number

Blockquote with attribution

Multiple Features Combined

Conclusion