Code

Le composant <Code> affiche du code avec coloration syntaxique. Il est utile lorsque l’utilisation d’un bloc de code Markdown n’est pas possible, par exemple pour afficher des données provenant de sources externes comme des fichiers, des bases de données ou des API.

Aperçu

exemple.md

## Bienvenue

Bonjour depuis **l'espace**!

Import

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

Utilisation

Utilisez le composant <Code> pour afficher du code avec coloration syntaxique, par exemple lorsque vous affichez du code provenant de sources externes.

Consultez la documentation sur le « Composant Code » d’Expressive Code pour plus de détails sur l’utilisation du composant <Code> et la liste des props disponibles.

MDX

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

export const exampleCode = `console.log("Cela peut provenir d'un fichier ou d'un CMS !");`;
export const fileName = 'exemple.js';
export const highlights = ['fichier', 'CMS'];

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

Markdoc

{% code
   code="console.log(\"Cela peut provenir d'un fichier ou d'un CMS !\");"
   lang="js"
   title="exemple.js"
   meta="'fichier' 'CMS'" /%}

Aperçu

exemple.js

console.log("Cela peut provenir d'un fichier ou d'un CMS !");

Afficher du code importé

Dans les fichiers MDX et les composants Astro, utilisez le suffixe d’import ?raw de Vite pour importer n’importe quel fichier de code sous forme de chaîne de caractères. Vous pouvez ensuite passer cette chaîne importée au composant <Code> pour l’inclure dans votre page.

src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';
import importedCode from '/src/env.d.ts?raw';

<Code code={importedCode} lang="ts" title="src/env.d.ts" />

Aperçu

src/env.d.ts

/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

Props de <Code>

Implémentation : Code.astro

Le composant <Code> accepte toutes les props documentées dans la documentation sur le « Composant Code » d’Expressive Code.