Всё происходит в одном окне, и экспортируется ровно та картинка, которую вы видите. Тема и размер сохраняются между запусками, так что думать приходится только над первым сниппетом — все следующие это вставить и экспортировать.

1. Вставьте код

Скопируйте сниппет и вставьте его прямо в Codeshot сочетанием ⌘⇧V. Это сочетание заменяет весь исходник из любого места окна, так что предварительно щёлкать по редактору не нужно.

Подсветка применяется прямо при вставке. Язык определяется по самому коду — из 60 языков — и его можно задать вручную через меню «Язык», когда короткий фрагмент неоднозначен: три строки C и три строки C++ для любого определителя выглядят одинаково.

Вставлять текст, а не снимать редактор — вот что здесь главное. Так за кадром остаются курсор, подсветка выделения, значки на полях и ширина строки вашего редактора: ничему из этого в картинке не место.

2. Выберите тему

Доступны 30 тем подсветки, у каждой светлый и тёмный вариант. Их можно посмотреть все рядом — они отрисованы теми же стилями, что и в приложении.

При выборе полезно помнить о двух вещах. Подберите тему под свой редактор, если хотите, чтобы картинка казалась аудитории знакомой: Xcode для Swift, GitHub почти для всего остального. Но если картинку будут смотреть мелко, контраст важнее узнаваемости: мягкие светлые темы теряют структуру, когда их уменьшают до размеров ленты.

3. Выберите фон

Сниппет лежит на холсте, и этим холстом могут быть одни из 19 обоев macOS, один из 92 градиентов, ваш сплошной цвет или собственное изображение.

Фон можно и вовсе выключить и экспортировать с прозрачностью — именно это нужно, когда картинка идёт на слайд или на страницу, у которой уже есть свой фон.

4. Настройте рамку

Задайте радиус углов окна, отступы внутри него, поля вокруг и тень. Кнопки-«светофор» и заголовок окна можно включить или выключить, а шрифт подойдёт любой моноширинный, установленный на вашем Mac.

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

5. Экспортируйте в нужном размере

Пусть размер следует за содержимым — или зафиксируйте соотношение: 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 либо 3:4. Заготовки это лишь ярлыки поверх обычных полей ширины и высоты, так что любое другое соотношение просто вводится вручную.

Экспортируйте в 1×, 2× или 3×. По умолчанию берите 2×: экспорт мелкого текста в 1× на retina-экране выглядит мыльным, и это самая частая причина, по которой картинка с кодом смотрится любительски.

Дальше вынимайте её из приложения как удобно: скопировать прямо в буфер обмена сочетанием ⌘⇧C, перетащить превью в другое приложение или сохранить через ⌘S.

Куда она отправится

Правильное соотношение целиком зависит от площадки, и попасть в него стоит: каждая платформа кадрирует по-своему. Есть отдельные руководства для X, LinkedIn и Facebook, а также руководства по размерам для остальных.

И последнее, без обиняков: картинку нельзя скопировать, найти поиском или прочитать экранным диктором. Если код предназначен для использования, а не только для разглядывания, публикуйте рядом с изображением ссылку на исходник.