Code

The <Code> component renders syntax highlighted code. It is useful when using a Markdown code block is not possible, for example, to render data coming from external sources like files, databases, or APIs.

Import

import { Code } from '@astrojs/starlight/components';

Usage

Use the <Code> component to render syntax highlighted code, for example when displaying code fetched from external sources.

See the Expressive Code “Code Component” docs for full details on how to use the <Code> component and the list of available props.

Display imported code

In MDX files and Astro components, use Vite’s ?raw import suffix to import any code file as a string. You can then pass this imported string to the <Code> component to include it on your page.

<Code> Props

Implementation: Code.astro

The <Code> component accepts all the props documented in the Expressive Code “Code Component” docs.