Как сделать скриншот кода для слайдов или публикаций

Чтобы сделать скриншот кода, откройте генератор скриншотов кода и вставьте код в окно. В разделе «Язык» выберите язык, чтобы цвета соответствовали коду. Введите название в поле «Имя файла» — оно появится в строке заголовка. Затем нажмите «PNG». Изображение создаётся в браузере.

На скриншоте редактора также видны вкладки, меню и мелкий текст. Здесь будет только окно с вашим кодом, увеличенное втрое относительно размера на экране. Текст останется чётким даже на большом слайде.

Как создать изображение

1. Нажмите внутри окна и вставьте код. Можно также набрать его вручную. Клавиша Enter сохраняет отступ предыдущей строки.
2. В разделе «Язык» выберите язык. По умолчанию выбран JavaScript.
3. В разделе «Стиль окна» выберите рамку: macOS, Windows или «Нет». По умолчанию выбрана macOS.
4. Введите имя файла, например retry.py. Оно появится в строке заголовка.
5. Нажмите «PNG» под предварительным просмотром.

Генератор скриншотов кода: функция повторных попыток на Python в редакторе, выбран язык Python и введено имя файла retry.py

Файл сохраняется под именем snippet с добавлением номера, например snippet-1792757286543.png. Нажмите «Вставить пример», чтобы сначала посмотреть короткий пример на JavaScript.

Какие языки можно выбрать

В списке «Язык» есть 25 вариантов.

• Веб-разработка: JavaScript, TypeScript, HTML и CSS.
• Программирование: Python, Java, Rust, C++, C, Go, PHP, SQL и Shell.
• Данные и конфигурация: JSON, JSON5, XML, YAML, CSV, INI, TOON, Nginx и Prisma Schema.
• Текст: Markdown, LaTeX и обычный текст.

Язык влияет только на цвета. Он не определяется по коду или имени файла, поэтому выберите его самостоятельно.

Как изменить цвета

Цвета кода зависят от темы сайта. Для тёмного изображения откройте меню в верхней части страницы, нажмите кнопку темы и выберите «Тёмная тема». Для белого изображения выберите «Светлая тема».

В обеих темах строка заголовка остаётся тёмной, пока вы не измените параметр «Цвет строки заголовка». Цвет текста заголовка станет белым или чёрным — в зависимости от того, какой вариант лучше читается. Если в разделе «Стиль окна» выбрать «Нет», строка заголовка исчезнет, а настройка цвета станет недоступна.

Размер шрифта и отступы изменить нельзя. На изображении нет номеров строк.

Как настроить ширину

Ширина окна соответствует самой длинной строке. Перетащите небольшую пунктирную ручку в правом нижнем углу, чтобы сделать окно уже или шире. Длинные строки будут переноситься. Минимальная ширина окна — 300 пикселей. Ручки на изображении нет.

Очень длинная строка может вывести окно за границы области предварительного просмотра. Нажмите кнопку «Сбросить» на панели над предварительным просмотром, чтобы вернуть окно в область просмотра. Кнопки масштабирования меняют только предварительный просмотр, но не скачиваемое изображение.

Какой формат выбрать

• PNG сохраняет прозрачность за пределами закруглённых углов, поэтому изображение подойдёт для слайда любого цвета.
• JPG заполняет эти небольшие углы чёрным цветом.
• «Печать» открывает изображение в новом окне вместе с диалогом печати.

Оба формата в три раза больше окна на экране. Например, при ширине окна 752 пикселя ширина изображения составит 2256 пикселей.

Вставьте код, выберите язык и скачайте изображение PNG для слайда.