Astro Expressive code syntax highlighting integration

#astro

#expressive-code

3 min read

2024-03-29

2024-04-10

</Metadata>

<Post>

Line numbers

Markdown:

```js showLineNumbers

Result:

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

Markdown:

```js showLineNumbers=false

Result:

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

Line highlighting

Markdown:

```js {1, 4, 8-12}

Result:

1
import { someBoilerplateEngine } from '@example/boilerplate'
2
import { evenMoreBoilerplate } from '@example/more-boilerplate'
3

4
const engine = someBoilerplateEngine(evenMoreBoilerplate())
5

6
engine.doSomething(1, 2, 3, calcFn)
7

8
function calcFn() {
9
  const a = 1
10
  const b = 2
11
  return a + b
12
}

Word highlighting

Markdown:

```js "evenMoreBoilerplate" "evenMoreBoilerplate()"

Result:

1
import { someBoilerplateEngine } from '@example/boilerplate'
2
import { evenMoreBoilerplate } from '@example/more-boilerplate'
3

4
const engine = someBoilerplateEngine(evenMoreBoilerplate())
5

6
engine.doSomething(1, 2, 3, calcFn)
7

8
function calcFn() {
9
  const a = 1
10
  const b = 2
11
  return a + b
12
}

Markdown:

```ts /ye[sp]/

Results:

1
console.log('The words yes and yep will be marked.')

Markdown:

```sh /\/ho.*\//

Results:

1
echo "Test" > /home/test.txt

Markdown:

```sh ins=/ye(s)/ del=/ye(p)/

Results:

1
The word "yes" will have the letter "s" marked.
2
This also works for the "p" in "yep".

Wrapping

Markdown:

```js wrap

Result:

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
}

Markdown:

```js wrap=false

Result:

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
}

Indentation

Markdown:

```js wrap preserveIndent

Result:

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
}

Markdown:

```js wrap preserveIndent=false

Result:

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
}

Diffs

Markdown:

```diff showLineNumbers=false

Result:

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Markdown:

```diff lang="js" showLineNumbers

Result:

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
}

File names

Markdown:

```js title="my-test-file.js"

Result:

1
console.log('Title attribute example')

Using 1st line javascript comment

// src/content/main.js

Result:

1
console.log('Title attribute example')

Using 1st line HTML comment

Result:

1
<div>
2
  Hello, world!
3
</div>

Editor and terminal frames

Markdown:

```bash
# or shell

Result:

1
echo "This terminal frame has no title"

Markdown:

```powershell title="PowerShell terminal example"

Result:

1
Write-Output "This one has a title!"

Markdown:

```sh frame="none" showLineNumbers=false

Result:

echo "Look ma, no frame! …and no line numbers!"

Markdown:

```ps frame="code" title="PowerShell Profile.ps1"

Result:

1
# Without overriding, this would be a terminal frame
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Collapsible sections

Markdown:

```js collapse={1-5, 12-14}

Result:


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
  return a + b
15
}

Edit

</Post>