Легко создавайте красивые изображения исходного кода с помощью углерода

Twitter и другие социальные сети - отличные способы поделиться небольшими фрагментами полезного исходного кода. Приятно немного украсить эти образцы красивыми цветами или необычным декором.

Веб-приложение Carbon позволяет создавать изображения образцов исходного кода. Он предоставляет несколько функций, включая подсветку синтаксиса, различные шрифты и темы. Затем он позволяет скопировать изображение кода на Medium, опубликовать его в Твиттере или сохранить как файл изображения.

Основы использования углерода

В Углеродная домашняя страница отображает пример кода в основном текстовом поле. Это уже полезная демонстрация сервиса. Он показывает вам точный предварительный просмотр изображения, которое вы можете создать.

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

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

Углерод создает изображение вашего исходного кода с выделенным синтаксисом цветным текстом. Он представляет ваш код в основном окне поверх фонового цвета или изображения.

Настройка темы позволяет применять цветовую палитру текста из заранее определенного диапазона. Многие из этих тем широко используются текстовыми редакторами и другим существующим программным обеспечением.

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

На более низком уровне Carbon предоставляет различные настройки стиля для настройки окончательного изображения кода. Все они доступны в меню настроек со значком шестеренки:

Вы можете выбрать один из 15 различных моноширинных шрифтов. Вы можете включить элементы управления окном в свое изображение и изменить его ширину или отступы вокруг окна кода. Вы также можете изменить высоту строки, размер шрифта и включить номера строк. Если вы часто пользуетесь услугой, вы можете сохранить свои настройки в качестве предустановки для использования в будущем.

Интеграция Carbon с GitHub Gists

Очень полезная функция позволяет загружать исходный код из GitHub Gist. Для этого добавьте идентификатор Gist ID в домен Carbon, чтобы получить URL в следующем формате:

https://carbon.now.sh/ea85abfb66e419ffd45564abd5bba3e7

Затем Carbon импортирует исходный код из этого Gist, и вы можете работать с ним, как если бы вы ввели его напрямую.

Как экспортировать изображение кода из углерода

После того, как вы настроили образец кода по своему вкусу, пора его использовать. Здесь у вас есть два основных варианта: опубликовать его в Твиттере или сохранить как файл.

Основная цель Carbon - улучшить изображения кода, размещаемые в Twitter, поэтому он представляет твиты в качестве первого варианта экспорта. Нажатие на Твитнуть Кнопка открывает диалоговое окно создания твита во всплывающем окне. В твит предварительно добавлен URL-адрес, который конвертируется в загруженное изображение при отправке твита. Кроме того, вы можете редактировать твит по своему усмотрению.

Загрузка изображения в виде файла обеспечивает большую гибкость. Вы можете экспортировать его как PNG или SVG и при этом масштабировать размер.

Углерод также позволяет копировать и вставлять созданное вами изображение. Он включает в себя опцию, которая позволяет вам встроить код в сообщение Medium или загрузить изображение в Imgur.

Преимущества совместного использования исходного кода в изображении

Совместное использование исходного кода в виде изображения имеет несколько преимуществ. В частности, для Twitter это помогает обойти максимальную длину твита. Теоретически вы можете создавать изображения, содержащие гораздо больше кода, чем позволяет ограничение по тексту Twitter.

Связанный: Как писать более длинные твиты

Главная особенность Carbon - подсветка синтаксиса. В настоящее время вы не можете выделять простой текст синтаксисом в Твиттере или многих других сервисах.

Изображения исходного кода также немного легче распространять и хранить, чем текст исходного кода. Но они могут препятствовать копированию исходного кода, что может быть хорошо. Вы можете беспокоиться о том, что люди могут копировать ваш код, не понимая, что он на самом деле делает.

Недостатки встраивания исходного кода в изображение

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

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

Использование углерода для обмена фрагментами кода

Углерод позволяет легко создавать привлекательные изображения фрагментов исходного кода. Это простое веб-приложение, которое фокусируется на одной конкретной задаче с достаточной настройкой.

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

4 лучших альтернативы Pastebin для обмена кодом и текстом

Эти альтернативы Pastebin позволяют легко вводить, вставлять и обмениваться блоками кода или текста с другими пользователями в Интернете.

Об авторе