Code Blocks

Expressive Code is a beautiful solution for code blocks that, under the hood, uses Shiki for syntax highlighting. Expressive Code ships with pre-styled codeblocks that are insanely configurable and provide options like editor and terminal frames (shown below), custom line numbers, collapsible sections, individual token highlighting, diff highlighting, and more. To use these for any provided codeblock, simply add any of the following props after the codeblock’s backticks:

Syntax Highlighting

1
console.log('This code is syntax highlighted!')

ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan

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

Full RGB colors:
ForestGreen - RGB(34, 139, 34)

Text formatting: Bold Dimmed Italic Underline

Code editor frames

1
// Using `title="my-test-file.js"`
2
console.log('Title attribute example')

1
// Using `// src/content/index.ts`
2
console.log('File name comment example')

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Marking full lines & line ranges

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

Selecting line marker types

mark: default marker type, shown as a gray highlight
ins: inserted lines, shown with a green highlight and a green bar on the left
del: deleted lines, shown with a red highlight and a red bar on the left

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

Adding labels to line markers

100
// <- This codeblock starts at line 100!
101

102
// This line should be marked as a diff addition
103
// This line should be marked as a diff deletion
104
// This line should be highlighted
105

106
// The keyword "added" will be highlighted in green
107
// The keyword "deleted" will be highlighted in red
108
// The keyword "awesome" will be marked with gray
109

110
// Insert an empty line above code you wish to add a note to
111

112
function demonstrateFeatures() {
113
  console.log('Hello world!')
114
  return true
115
}
116

117
function obfuscateString(input) {
118
  return Buffer.from(input)
119
    .toString('base64')
120
    .replace(/[A-Za-z]/g, (c) =>
121
      String.fromCharCode(c.charCodeAt(0) + (Math.random() > 0.5 ? 1 : -1)),
122
    )
123
}
124

125
function deleteAllFiles() {
126
  fs.rmdirSync('/etc', { recursive: true })
127
  fs.rmdirSync('/usr', { recursive: true })
128
  fs.rmdirSync('/home', { recursive: true })
129
  return 'System wiped!'
130
}
131

132
// These lines can be collapsed
133
interface HidingStuffHere {
134
  name: string
135
  age: number
136
  email: string
137
  phone: string
138
}

Adding long labels on their own lines

100
// <- This codeblock starts at line 100!
101

102
// This line should be marked as a diff addition
103
// This line should be marked as a diff deletion
104
// This line should be highlighted
105

106
// The keyword "added" will be highlighted in green
107
// The keyword "deleted" will be highlighted in red
108
// The keyword "awesome" will be marked with gray
109

110
// Insert an empty line above code you wish to add a note to
111

112
function demonstrateFeatures() {
113
  console.log('Hello world!')
114
  return true
115
}
116

117
function obfuscateString(input) {
118
  return Buffer.from(input)
119
    .toString('base64')
120
    .replace(/[A-Za-z]/g, (c) =>
121
      String.fromCharCode(c.charCodeAt(0) + (Math.random() > 0.5 ? 1 : -1)),
122
    )
123
}
124

125
function deleteAllFiles() {
126
  fs.rmdirSync('/etc', { recursive: true })
127
  fs.rmdirSync('/usr', { recursive: true })
128
  fs.rmdirSync('/home', { recursive: true })
129
  return 'System wiped!'
130
}
131

132
// These lines can be collapsed
133
interface HidingStuffHere {
134
  name: string
135
  age: number
3 collapsed lines
136
  email: string
137
  phone: string
138
}

Using diff-like syntax

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

Marking individual text inside lines

1
// Plaintext search strings
2
function demo() {
3
  // Mark any given text inside lines
4
  return 'Multiple matches of the given text are supported'
5
}

Marking individual text inside lines

1
// Regular expressions
2
console.log('The words yes and yep will be marked.')

# Regular expressions
echo "Test" > /home/test.txt

1
// Regular expressions
2
If you only want to mark certain parts matched by your regular expression, you can use capture groups.
3

4
For example, the expression `/ye(s|p)/` will match yes and yep, but only mark the character s or p.

1
// Regular expressions
2
To prevent this special treatment of capture groups, you can convert them to non-capturing groups by adding ?: after the opening parenthesis.
3

4
This block uses `/ye(?:s|p)/`, which causes the full
5
matching words "yes" and "yep" to be marked.

1
// Selecting inline marker types (mark, ins, del)
2
function demo() {
3
  console.log('These are inserted and deleted marker types')
4
  // The return statement uses the default marker type
5
  return true
6
}

Configuring word wrap per block

1
// Example with wrap
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with wrap=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Configuring indentation of wrapped lines

1
// Example with preserveIndent (enabled by default)
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with preserveIndent=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Collapsible sections


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

Displaying line numbers per block

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

5
// Changing the starting line number
6
console.log('Greetings from line 5!')
7
console.log('I am on line 6')