43 KiB
Введение
Вы знаете все эти красивые изображения кода в Twitter? Хотя код и так обычно впечатляет, мы увидели возможность улучшить его в эстетическом плане. Carbon позволяет легко создавать красивые изображения кода и делиться ими. Чего же вы ждете? Удивите всех подписчиков своим новым дизайнерским мастерством!
Особенности
- Настройка. Настройте такие вещи, как тема синтаксиса вашего изображения, шрифт и прочее
- Быстрый обмен. Сохраните ваше изображение или поделитель ссылкой в один клик
- Сохранение фрагментов. Создайте аккаунт, чтобы сохранить фрагменты кода. Сохраненными фрагментами можно сразу поделиться в Twitter и Slack.
Использование
Импортирование
Есть несколько способов импортировать код в Carbon:
- Перетащите файл в редактор
- Добавьте GitHub gist ID в URL (например
carbon.now.sh/<место_для_gist>
) - Просто начните печатать! (Или вставьте код из буфера обмена)
Настройка
Как только вы поместили код в Carbon, вы можете кастомизировать изображение меняя тему синтаксиса, фоновый цвет, тему окна, отступы, тени, шрифты и многое другое.
Экспортирование и обмен
После настройки изображения, вы можете поделиться фрагментом несколькими способами
Создайте сохраненный фрагмент
Если вы хотите поделиться сохраненным фрагментом, то изображение автоматически можно запостить в Twitter, Slack и др. Это позволит пользователям не только увидеть ваше творение, но также даст им доступ к исходному коду по ссылке. А еще, если вам нужно обновить код, просто перейдите по этой же ссылке, чтобы отредактировать фрагмент напрямую.
Чтобы создать и сохранить фрагмент кода:
- Зайдите через в аккаунт через кнопки "Sign in/Sign up"
- Редактируйте как обычно — ваш код сохранится автоматически
- Скопируйте URL из браузера и поделитесь ссылкой!
Создание встроенного фрагмента
Это рекомендуемый способ поделиться фрагментом Carbon на вашем сайте или блоге. Читатели также смогут скопировать код нажатием кнопки.
Вы можете встроить любой фрагмент кода Carbon на вашем сайте напрямую, используя ссылки carbon.now.sh/embed
. "Copy Menu" позволит быстро скопировать правильный код iFrame или закодированную ссылку для размещения на таких платформах как Medium.
И наконец, вы также можете встраивать сохраненные фрагменты или GitHub gist'ы с помощью carbon.now.sh/embed/:id
.
Использование кнопки Tweet
Кнопка Tweet не толко поделится изображением в Twitter, но также корректно закодирует все alt
-тексты чтобы удостовериться, что ваши изображения доступны. Тем не менее, если вы хотите твиттнуть изображение вручную, то рекомендуем изучить как сделать ваши изображения Twitter доступными.
Скачать изображение напрямую
Carbon позволяет сохранять изображения в форматах PNG и SVG. Вы можете также нажать Export → Open
чтобы открыть ваше изображение из браузера. Наконец, вы можете скопировать готовое изображение фрагмента в буфер обмена используя Copy → Image
.
Установка Carbon на ПК (для использования оффлайн)
Если вы используете Google Chrome или любой другой браузер, который поддерживает Progressive Web Apps, вы можете установить Carbon на компьютер, чтобы использовать его без Интернета:
- Зайдите на carbon.now.sh
- Нажмите на кнопку настроек у вашего браузера
- Выберите "Установить Carbon..." (или "Install Carbon...")
Сообщество
Оцените эти проекты от нашего крутого сообщества:
Плагины для редакторов
- IntelliJ IDEA
carbon-now-sh
- Откройте выделение в текущем файле в IntelliJ IDEA в Carbon через контекстное меню - Atom
carbon-now-sh
- Откройте текущий файл в Atom в Carbon с помощьюshift-cmd-A
- VS Code
carbon-now-sh
- Откройте текущий файл VS Code в Carbon с помощью командыcarbon
- Sublime Text 3
carbon-now-sh
- Откройте выделение в текущем файле в Sublime Text 3 через кастомный связанный ключ - Vim
carbon-now-sh
- Откройте выделение в ткущем файле в Vim/Neovim используя функциюCarbonNowSh()
- Emacs
carbon-now-sh
- Откройте выделение в ткущем файле в Emacs используя интерактивную функциюcarbon-now-sh
- Xcode
carbon-now-sh
- Откройте выделенный текст с помощьюcarbon.now.sh
- Xcode
nef
- Это расширение для Xcode позволяет экспортировать выделенный текст как фрагмент в Carbon в одно действие
Инструменты
- CLI
carbon-now-cli
- Откройте файл в CArbon или скачайте его напрямую используяcarbon-now
с выборочным выделением, интерактивным режимом и многим другим - CodeExpander - Смарт-клиент для работы с GitHub gist'ами с функциями TextExpander
nef
- Экспортируйте несколько фрагментов кода в Carbon изXcode Playground
@carbonshbot
- Telegram чат-бот, который превращает код или gist URL в изображение Carbon- R
carbonate
- Интерактивно меняйте стиль изображения наR
и также открывайте его в Carbon или скачивайте напрямую - Carbon for Slack - Используйте Carbon в Slack. Просто вызовите команду
/carbon
.
Цитирования
- "CS 101 - An Introduction to Computational Thinking" - Книга по компьютерным наукам от Сарбо Роя.
Авторы
Carbon существует благодаря:
- Mike Fix (@mfix22)
- Brian Dennis (@briandennis)
- Jake Dexheimer (@jakedex)
Лицензия
Дополняйте и поддерживайте
Пул реквесты приветствуются! Пожалуйста, изучите правила для более подробной информации.
Спонсоры
Благодарности
▲ Vercel за поддержку хостинга Carbon.
Все авторы
Выражаем благодарности всем этим замечательным людям (emoji key):