Code
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
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.
import { Code } from '@astrojs/starlight/components';
export const exampleCode = `console.log('This could come from a file or CMS!');`;export const fileName = 'example.js';export const highlights = ['file', 'CMS'];
<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
{% code code="console.log('This could come from a file or CMS!');" lang="js" title="example.js" meta="'file' 'CMS'" /%}
console.log('This could come from a file or CMS!');
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.
import { Code } from '@astrojs/starlight/components';import importedCode from '/src/env.d.ts?raw';
<Code code={importedCode} lang="ts" title="src/env.d.ts" />
/// <reference path="../.astro/types.d.ts" />/// <reference types="astro/client" />
<Code>
Props
Implementation: Code.astro
The <Code>
component accepts all the props documented in the Expressive Code “Code Component” docs.