Подсветка синтаксиса

Astro поставляется со встроенной поддержкой Shiki и Prism. Это обеспечивает подсветку синтаксиса для:

всех блоков кода (```) в файлах Markdown и MDX;
контента внутри встроенного компонента <Code /> (на базе Shiki);
контента внутри компонента <Prism /> (на базе Prism).

Блоки кода в Markdown

В Markdown блоки кода выделяются тремя обратными кавычками ```. Вы можете указать язык программирования сразу после открывающих кавычек.

```js
// Код JavaScript с подсветкой
const hello = "world";
```

По умолчанию Astro использует Shiki с темой github-dark. Итоговый HTML содержит инлайновые стили и не требует дополнительных CSS-файлов или клиентского JavaScript.

Настройка темы Shiki

Вы можете выбрать любую встроенную тему Shiki в конфигурации:

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'dracula',
    },
  },
});

Поддержка светлой и темной тем

Shiki позволяет настроить разные темы для разных режимов отображения:

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
    },
  },
});

Компоненты для блоков кода

В файлах .astro и .mdx доступны два компонента для рендеринга кода.

Компонент `<Code />`

Этот компонент работает на базе Shiki. Он поддерживает все популярные темы и языки, а также автоматический перенос строк.

---
import { Code } from 'astro:components';
---
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" wrap />

Компонент `<Prism />`

Если вы предпочитаете Prism, установите пакет @astrojs/prism:

npm install @astrojs/prism

Затем импортируйте и используйте его:

---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />