Code

Die Komponente <Code> gibt syntaktisch hervorgehobenen Code wieder. Sie ist nützlich, wenn die Verwendung eines Markdown-Codeblocks nicht möglich ist, zum Beispiel, um Daten aus externen Quellen wie Dateien, Datenbanken oder APIs darzustellen.

Vorschau

example.md

## Willkommen

Hallo aus dem **Weltraum**!

Import

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

Verwendung

Verwende die Komponente <Code>, um Code mit hervorgehobener Syntax darzustellen, z. B. bei der Anzeige von Code aus externen Quellen.

Siehe die Ausdrucksstarker Code „Code Komponente“ Dokumentation für alle Details über die Verwendung der <Code> Komponente und die Liste der verfügbaren Eigenschaften.

MDX

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

export const exampleCode = `console.log('Dies könnte aus einer Datei oder einem CMS stammen!');`;
export const fileName = 'example.js';
export const highlights = ['Datei', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Markdoc

{% code
   code="console.log('Dies könnte aus einer Datei oder einem CMS stammen!');"
   lang="js"
   title="example.js"
   meta="'Datei' 'CMS'" /%}

Vorschau

example.js

console.log('Dies könnte aus einer Datei oder einem CMS stammen!');

Importierten Code anzeigen

Verwende in MDX-Dateien und Astro-Komponenten Vites Importsuffix ?raw, um jede Codedatei als Zeichenfolge zu importieren. Du kannst diese importierte Zeichenfolge dann an die Komponente <Code> übergeben, um sie auf deiner Seite einzubinden.

src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';
import importedCode from '/tsconfig.json?raw';

<Code code={importedCode} lang="json" title="tsconfig.json" />

Vorschau

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

<Code>-Eigenschaften

Implementation: Code.astro

Die <Code>-Komponente akzeptiert alle in der Ausdrucksstarker Code Dokumentation „Code Komponente“ dokumentierten Eigenschaften.