Code Blocks

Markdown code block

Code block rendered with the Markdown syntax using three backticks ``` at the start and end.

const foo = 'bar'

<Code> component

Code block rendered with the <Code> component.

const foo = 'bar'

Text markers

Code blocks with some text markers.

function test() {
  const foo = 'bar'
}

function test() {
  const foo = 'bar'
}

Labels

Code blocks with some text markers and labels.

example.astro

---
import { Icon } from '@astrojs/starlight/components';
---


<Icon name="seti:lock" />


<button type="button">Login</button>


<a href="/login/">Login</a>

Diff

Code block combining syntax highlighting with diff-like syntax.

function test() {
  const foo = 'bar'
  const foo = 'baz'
}

Editor frame

Code block with a file name in the editor frame.

test.js

const foo = 'bar'

Terminal frame

Code block with a terminal frame.

Build something…

pnpm run build