Легко создавайте красивые изображения исходного кода с помощью углерода
Twitter и другие платформы социальных сетей – отличные способы поделиться небольшими фрагментами полезного исходного кода. Приятно немного украсить эти образцы красивыми цветами или причудливым декором.
Веб-приложение Carbon позволяет создавать изображения образцов исходного кода. Он предоставляет несколько функций, включая подсветку синтаксиса, различные шрифты и темы. Затем он позволяет скопировать изображение кода на Medium, опубликовать его в Твиттере или сохранить как файл изображения.
Основы использования углерода
На домашней странице Carbon в основном текстовом поле отображается пример кода. Это уже полезная демонстрация сервиса. Он показывает вам точный предварительный просмотр изображения, которое вы можете создать.
Начните с ввода кода. Вы можете скопировать и вставить из текстового редактора или ввести его напрямую. Обратите внимание, что текстовое поле расширяется до ширины самой длинной строки.
Как настроить изображение исходного кода
Углерод создает изображение вашего исходного кода с выделенным синтаксисом цветным текстом. Он представляет ваш код в основном окне поверх фонового цвета или изображения.
Настройка темы позволяет применять цветовую палитру текста из заранее определенного диапазона. Многие из этих тем широко используются текстовыми редакторами и другим существующим программным обеспечением.
По умолчанию язык установлен на Авто , поэтому 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 – подсветка синтаксиса. В настоящее время вы не можете выделять простой текст синтаксисом в Twitter или многих других сервисах.
Изображения исходного кода также немного легче распространять и хранить, чем текст исходного кода. Но они могут препятствовать копированию исходного кода, что может быть хорошо. Вы можете беспокоиться о том, что люди могут копировать ваш код, не понимая, что он на самом деле делает.
Недостатки встраивания исходного кода в изображение
Изображения занимают намного больше места, чем текст. Хотя можно извлекать текст из изображений , это все же требует дополнительных усилий.
Самое главное, что текст на изображениях часто недоступен для тех, кто его не видит. Например, программы чтения с экрана могут не иметь доступа к такому тексту. Кнопка Tweet от Carbon автоматически предоставляет замещающий текст, который устраняет эту проблему.
Использование углерода для обмена фрагментами кода
Углерод позволяет легко создавать привлекательные изображения фрагментов исходного кода. Это простое веб-приложение, которое фокусируется на одной конкретной задаче с достаточной настройкой.
Углерод преобразует текст исходного кода в изображения, и это не всегда может быть уместным. Если вы хотите поделиться своим кодом как фактическим текстом, есть много вариантов сделать это.