# Подсветка

Slidev поставляется с двумя подсветками синтаксиса на выбор:

• Prism
• Shiki

Prism - один из самых популярных инструментов подсветки синтаксиса. Подсветка выполняется путём добавления токенов в виде классов и стилизации их через CSS. Вы можете просмотреть официальные темы или очень легко создать/настроить их самостоятельно, используя prism-theme-vars.

Shiki, с другой стороны, представляет собой средство выделения синтаксиса на основе грамматики TextMate. Он генерирует цветовые токены, поэтому дополнительный CSS не требуется. Поскольку он имеет отличную поддержку грамматики, сгенерированные цвета очень точны, как, например, в VS Code. Shiki также поставляется с набором встроенных тем. Обратной стороной Shiki является то, что для выделения также требуются темы TextMate (совместимые с темой VS Code), что может быть немного сложнее настроить.

Темы Slidev обычно поддерживают как Prism, так и Shiki, но в зависимости от темы, которую вы используете, он может поддерживать только одну из них.

Когда у вас есть выбор, компромисс заключается в следующем:

• Prism – для лёгкой кастомизации
• Shiki – для более аккуратной подсветки

По умолчанию Slidev использует Prism. Вы можете изменить его в frontmatter:

---
highlighter: shiki
---

# Конфигурация Prism

Чтобы настроить Prism, вы можете просто импортировать css тему или использовать prism-theme-vars для настройки тем как для светлого, так и для тёмного режима. Обратитесь к документации Prism для получения более подробной информации.

# Конфигурация Shiki

Создайте файл ./setup/shiki.ts со следующим содержанием:

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    theme: {
      dark: 'min-dark',
      light: 'min-light',
    },
  }
})

Доступные имена тем можно посмотреть в документации Shiki.

Или, если вы хотите использовать свою собственную тему:

/* ./setup/shiki.ts */

import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(async({ loadTheme }) => {
  return {
    theme: {
      dark: await loadTheme('path/to/theme.json')),
      light: await loadTheme('path/to/theme.json')),
    },
  }
})