Expressive Code

A quick overview of Expressive Code features.

Themes

• Expressive Code Docs
• Available Themes

Configuration

astro.config.mjs

export default defineConfig({
  integrations: [
    starlight({
      expressiveCode: {
        themes: [
          "github-dark-dimmed",
          "github-light",
        ],
      },
    }),
  ],
});

Word Wrap

• Expressive Code Docs

No Wrap (default)

function printText() {
  if (true) {
    console.log("Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive");
  }
}

Markdown:

```js
function printText() {
  if (true) {
    console.log("Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive");
  }
}
```

Wrap

function printText() {
  if (true) {
    console.log(
      "Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive",
    );
  }
}

Markdown:

```js wrap
function printText() {
  if (true) {
    console.log(
      "Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive",
    );
  }
}
```

Unpreserved Indent

function printText() {
  if (true) {
    console.log(
      "Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive",
    );
  }
}

Markdown:

```js wrap preserveIndent=false
function printText() {
  if (true) {
    console.log(
      "Just keep examining every low bid quoted for zinc etchings. How razorback-jumping frogs can level six piqued gymnasts! A quick movement of the enemy will jeopardize six gunboats All questions asked by five watched experts amaze the judge Bobby Klun awarded Jayme sixth place for her very high quiz The wizard quickly jinxed the gnomes before they vaporized Zelda might fix the job growth plans very quickly on Monday Zack Gappow saved the job requirement list for the six boys Jackie will budget for the most expensive zoology equipment Quirky spud boys can jam after zapping five worthy Polysixes. Jim quickly realized that the beautiful gowns are expensive",
    );
  }
}
```

Editor & Terminal Frames

• Expressive Code Docs

Code Editor Frame

test-file.js

console.log("Hello, star!");

Markdown:

```js title="test-file.js"
console.log("Hello, star!");
```

File Name Comments

index.html

<h1>Home</h1>
<p>Hello, file!</p>

```html
<!-- index.html -->
<h1>Home</h1>
<p>Hello, file!</p>
```

Terminal Frame

terminal

print 'Hello, star!'

Markdown:

```zsh title="terminal"
print 'Hello, star!'
```

Override Frame Type

terminal

print 'Hello, code!'

Markdown:

```zsh title="terminal" frame="code"
print 'Hello, code!'
```

test-file.js

console.log("Hello, terminal!");

Markdown:

```js title="test-file.js" frame="terminal"
console.log("Hello, terminal!");
```

Markers

• Expressive Code Docs

Line Markers

// line 01
// line 02
// line 03
// line 04
// line 05
// line 06
// line 07
// line 08
// line 09
// line 10

Markdown:

```js {1, 3, 6-7, 10}
// line 01
// line 02
// line 03
// line 04
// line 05
// line 06
// line 07
// line 08
// line 09
// line 10
```

Marker Types ( mark, ins, del)

marker-type.js

/**
 * Apply marker type
 * @param {string} line
 * @param {string} mType="mark"
 * @returns {string|null}
 */
function markerTypes(line, mType = "mark") {
  switch (mType) {
    case "mark":
      return `<mark>${line}</mark>`;
    case "ins":
      return `<mark>'${line}'</mark>`;
    case "del":
      return `<mark>${line}</mark>`;
    default:
      return false;
  }
  if (/^mark$|^ins$|^del$/.test("mark")) {
    return `<${mType}>${line}</${mType}>`;
  } else {
    return false;
  }
}

Markdown:

```js title="marker-type.js" mark={1-6} del={8-17} ins={17-22}
/**
 * Apply marker type
 * @param {string} line
 * @param {string} mType="mark"
 * @returns {string|null}
 */
function markerTypes(line, mType = "mark") {
  switch (mType) {
    case "mark":
      return `<mark>${line}</mark>`;
    case "ins":
      return `<ins>'${line}'</ins>`;
    case "del":
      return `<del>${line}</del>`;
    default:
      return false;
  }
  if (/^mark$|^ins$|^del$/.test("mark")) {
    return `<${mType}>${line}</${mType}>`;
  } else {
    return false;
  }
}
```

Marker Labels

// line 01
// line 02
// line 03
// line 04
// line 05
// line 06
// line 07
// line 08
// line 09
// line 10

Markdown:

```js mark={"note (overlap)":1, 3-4} del={"delete":6-7} ins={"insert":9-10}
// line 01
// line 02
// line 03
// line 04
// line 05
// line 06
// line 07
// line 08
// line 09
// line 10
```

Inline Markers

// line 01: odd
// line 02: even
// line 03: odd
// line 04: even
// line 05: odd
// line 06: even
// line 07: odd
// line 08: even
// line 09: odd
// line 10: even
// "quotes"

Markdown:

```js "even" '"quotes"'
// line 01: odd
// line 02: even
// line 03: odd
// line 04: even
// line 05: odd
// line 06: even
// line 07: odd
// line 08: even
// line 09: odd
// line 10: even
// "quotes"
```

Regular Expressions

marker-type.js

function markerTypes(line, mType = "mark") {
  switch (mType) {
    case "mark":
      return `<mark>${line}</mark>`;
    case "ins":
      return `<ins>'${line}'</ins>`;
    case "del":
      return `<del>${line}</del>`;
    default:
      return false;
  }
}

Markdown:

```js title="marker-type.js" /((<|")(|/)mark("|>))|([</]{1,2}ins(>|"))|("del"|<del>|</del>)/
function markerTypes(line, mType = "mark") {
  switch (mType) {
    case "mark":
      return `<mark>${line}</mark>`;
    case "ins":
      return `<ins>'${line}'</ins>`;
    case "del":
      return `<del>${line}</del>`;
    default:
      return false;
  }
}
```

Inline Marker Types (mark, ins, del)

formatType.js

function formatType(linetext, markerType = "mark") {
  // TODO: rename stuff
  if (/^mark$|^ins$|^del$/.test("mark")) {
    return `<${markerType}>${linetext}</${markerType}>`;
  } else {
    return false;
  }
}

Markdown:

```js title="formatType.js" mark="return false;" del="line" del="// TODO: rename stuff" ins=/arker|text/
function formatType(linetext, markerType = "mark") {
  // TODO: rename stuff
  if (/^mark$|^ins$|^del$/.test("mark")) {
    return `<${markerType}>${linetext}</${markerType}>`;
  } else {
    return false;
  }
}
```

Diff Syntax

• Expressive Code Docs

Basic

deleted
added
regular

Markdown:

```diff
- deleted
+ added
  regular
```

Diff Metadata

--- a/test.md
+++ b/test01.md
@@ -1,4 +1,4 @@
 # Test

-Deleted
+Modified
 Unmodified

Markdown:

```diff
--- a/test.md
+++ b/test01.md
@@ -1,4 +1,4 @@
 # Test

-Deleted
+Modified
 Unmodified
```

Language Syntax Highlighting

function hello(name = "world") {
 const hello = "Hello " + name + "!"
 // print
 console.log(hello)
 console.log(`Hello, ${name}!`)
}

hello("star")

Markdown:

```diff lang="js"
function hello(name = "world") {
- const hello = "Hello " + name + "!"
 // print
- console.log(hello)
+ console.log(`Hello, ${name}!`)
}

hello("star")
```