Code Display Configuration

Published: 2025-05-10 11:30:00Updated: 2026-01-26 12:00:00

🕒 Reading time: 4 min📝 Words: 1328👀 Views: Loading...

Code Display Configuration

The Stalux theme uses Expressive Code to provide powerful code display features, including syntax highlighting, editor/terminal frames, and automatic line wrapping. This article explains how to configure and use these features.

Syntax Highlighting

Expressive Code uses the same Shiki engine as VS Code to provide accurate syntax highlighting for over 100 languages.

Basic Usage

When using code blocks in Markdown, simply specify the language identifier in the opening code fence to get syntax highlighting:

1
```js
2
console.log("This code will be syntax highlighted!");
3
```

1
console.log("This code will be syntax highlighted!");

Supported Languages

Over 100 languages are supported by default, including JavaScript, TypeScript, HTML, CSS, Astro, Markdown, and more.

Editor and Terminal Frames

Expressive Code can render frames around code blocks, making them look like code editor or terminal windows.

Code Editor Frames

To make a code block look like an editor window such as VS Code, you need to provide a file name that can be displayed in an open file tab.

You can set the title attribute in the opening code fence to a file name, or add a file name comment in the first few lines of code:

1
``js title="my-test-file.js"
2
console.log("Example using the title attribute");
3
```
4

5
```js title="my-test-file.js"
6
console.log("Example using the title attribute");
7
```

1
console.log("Example using the title attribute");

1
<div>Example using a file name comment</div>

1
```html
2
<div>Example using a file name comment</div>
3
```

Terminal Frames

When encountering code blocks with language identifiers typically used for terminal sessions or shell scripts (such as bash, sh, powershell, etc.), Expressive Code performs additional checks to determine the frame type to use:

1
```bash
2
echo "This terminal frame has no title"
3
```
4

5
```powershell title="PowerShell Terminal Example"
6
Write-Output "This one has a title!"
7
```

1
echo "This terminal frame has no title"

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

Overriding Frame Types

If you want to override the automatic frame type detection for certain code blocks, you can add the frame="..." attribute in the opening code fence.

Supported values are code, terminal, none, and auto. The default value is auto.

1
```sh frame="none"
2
echo "Look, no frame!"
3
```
4

5
```ps frame="code" title="PowerShell Profile.ps1"
6
# Without the override, this would be a terminal frame
7
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
8
New-Alias tail Watch-Tail
9
```

1
echo "Look, no frame!"

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

Automatic Line Wrapping

When code blocks contain long lines, enabling automatic line wrapping keeps the code within the container bounds and avoids horizontal scrolling.

Configuring Line Wrapping for Individual Code Blocks

You can enable or disable automatic line wrapping for individual code blocks using the wrap boolean attribute in the code block meta information:

1
```js wrap
2
// Example with line wrapping enabled
3
function getLongString() {
4
  return "This is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large";
5
}
6
```
7

8
```js wrap=false
9
// Example with line wrapping disabled
10
function getLongString() {
11
  return "This is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large";
12
}
13
```

1
// Example with line wrapping enabled
2
function getLongString() {
3
    return "This is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large";
4
}

1
// Example with line wrapping disabled
2
function getLongString() {
3
    return "This is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large, this is a very long string that likely won't fit in the available space unless the container width is very large";
4
}

Configuring Wrapped Line Indentation

Indent Preservation

By default, the wrapped portion of long lines will align with the indentation level of its line, making wrapped code display in the same column. This increases readability of wrapped code, especially useful for languages where indentation is significant (such as Python).

You can disable the default behavior using the preserveIndent boolean attribute in the code block meta information:

1
// Example using preserveIndent (enabled by default)
2
function getLongString() {
3
    return "This is a very long string that likely won't fit in the available space unless the container width is very large";
4
}

1
```js wrap preserveIndent
2
// Example using preserveIndent (enabled by default)
3
function getLongString() {
4
  return "This is a very long string that likely won't fit in the available space unless the container width is very large";
5
}
6
```

1
// Example using preserveIndent=false
2
function getLongString() {
3
    return "This is a very long string that likely won't fit in the available space unless the container width is very large";
4
}

1
```js wrap preserveIndent=false
2
// Example using preserveIndent=false
3
function getLongString() {
4
  return "This is a very long string that likely won't fit in the available space unless the container width is very large";
5
}
6
```

Hanging Indent

You can also define the number of columns by which wrapped lines should be indented:

1
// Example using hangingIndent=2
2
function getLongString() {
3
    return "This is a very long string that likely won't fit in the available space unless the container width is very large";
4
}
5
function heavilyIndentedCode() {
6
    return "This long line already starts with significant indentation, and due to hangingIndent=2, its wrapped portion will be indented by an additional 2 columns";
7
}

1
```js wrap hangingIndent=2
2
// Example using hangingIndent=2
3
function getLongString() {
4
  return "This is a very long string that likely won't fit in the available space unless the container width is very large";
5
}
6
function heavilyIndentedCode() {
7
  return "This long line already starts with significant indentation, and due to hangingIndent=2, its wrapped portion will be indented by an additional 2 columns";
8
}
9
```

Global Configuration

You can configure Expressive Code’s default settings in astro.config.mjs:

1
import { defineConfig } from "astro/config";
2
import astroExpressiveCode from "astro-expressive-code";
3

4
export default defineConfig({
5
    integrations: [
6
        astroExpressiveCode({
7
            // Configure syntax highlighting
8
            themes: ["dracula", "solarized-light"],
9
            shiki: {
10
                // You can pass other plugin options here
11
            },
12

13
            // Configure frames
14
            frames: {
15
                // Example: hide the "Copy to clipboard" button
16
                showCopyToClipboardButton: false,
17
            },
18

19
            // Configure default properties
20
            defaultProps: {
21
                // Enable line wrapping by default
22
                wrap: true,
23
                // Disable wrapped line indentation for terminal languages
24
                overridesByLang: {
25
                    "bash,ps,sh": { preserveIndent: false },
26
                },
27
            },
28

29
            // Override default styles
30
            styleOverrides: {
31
                frames: {
32
                    shadowColor: "#124",
33
                },
34
            },
35
        }),
36
    ],
37
});

For more configuration options and advanced features, please refer to the Expressive Code official documentation.