Как пользоваться: Код в картинку
- Вставьте свой код или откройте пример. Язык определяется автоматически, но его можно выбрать вручную.
- Выберите тему, фон и стиль окна, а также введите имя файла для заголовка окна.
- Настройте отступы и размер шрифта; включите номера строк, если будете на них ссылаться.
- Скачайте PNG (2× хорошо смотрится на retina-экранах и в соцсетях), SVG для документации или нажмите Копировать изображение и вставьте его в Slack, X или слайд.
Зачем делиться кодом в виде картинки?
В соцсетях и на слайдах код в виде текста теряет форматирование и цвета. Изображение с кодом сохраняет отступы, подсветку и верстку именно такими, какими вы их задумали, хорошо выглядит в ленте и не может быть испорчено текстовым редактором. Для документации, из которой люди будут копировать код, лучше по-прежнему использовать текстовые блоки кода, а картинку добавлять только как иллюстрацию.
Как это работает
Фрагмент подсвечивается небольшим встроенным токенизатором: комментарии, строки, числа, ключевые слова, функции и свойства для десяти популярных языков. Затем он отрисовывается на canvas моноширинным шрифтом вашей системы. Экспорт в PNG перерисовывает код в 1×, 2× или 3×, поэтому изображение остаётся чётким. Экспорт в SVG сохраняет текст как текст: его можно масштабировать до любого размера, и он остаётся доступным для поиска. Всё происходит в вашем браузере.
Также может пригодиться: форматирование JavaScript, форматирование HTML, генератор CSS-градиентов.
Также ищут как: код в png.
Инструменты, которые хорошо сочетаются с Код в картинку
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- JSON форматтер — Вставьте JSON, чтобы отформатировать, минифицировать или проверить его.
- Редактор Markdown — Пишите Markdown с предпросмотром в соседнем окне, панелью форматирования и горячими клавишами.
- Генератор OG-картинок — За несколько секунд создайте красивое превью ссылки для Facebook, LinkedIn, X, Slack и WhatsApp: выберите шаблон, введите заголовок, добавьте логотип, затем скачайте PNG и готовые мета-теги.