Код

Компонент <Code> отображает код с подсветкой синтаксиса. Это полезно, когда использование блоков кода Markdown невозможно, например, для отображения данных, поступающих из внешних источников, таких как файлы, базы данных или API.

Превью

example.md

## Добро пожаловать

Привет из **космоса**!

Импорт

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

Использование

Используйте компонент <Code> для отображения кода с подсветкой синтаксиса, например, при отображении кода, полученного из внешних источников.

См. главу Компонент кода в документации Expressive Code для получения полной информации о параметрах, которые поддерживает <Code>.

MDX

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

export const exampleCode = `console.log('Это может быть файл или CMS!');`;
export const fileName = 'example.js';
export const highlights = ['файл', 'CMS'];

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

Markdoc

{% code
   code="console.log('Это может быть файл или CMS!');"
   lang="js"
   title="example.js"
   meta="'файл' 'CMS'" /%}

Превью

example.js

console.log('Это может быть файл или CMS!');

Отображение импортированного кода

Используйте суффикс ?raw в MDX-файлах и компонентах Astro, чтобы импортировать любой файл кода в виде строки. Затем можно передать эту импортированную строку компоненту <Code>, чтобы включить её на свою страницу.

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" />

Превью

tsconfig.json

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

Параметры <Code>

Реализация: Code.astro

Компонент <Code> принимает все параметры, описанные в документации Компонент кода Expressive Code.