Chalk.ist: инструмент для создания скриншотов кода с открытым исходным кодом от Idered 73

Что такое Chalk.ist?

Chalk.ist — это инструмент для создания скриншотов кода с открытым исходным кодом, разработанный Idered, который в основном помогает разработчикам генерировать красивые изображения из кода. Пользователю достаточно вставить код, выбрать тему и стиль, чтобы быстро создать привлекательные скриншоты кода с поддержкой множества языков программирования. Подходит для ведения блогов, создания презентаций (ppt), публикаций в социальных сетях и других сценариев.

Особенности Chalk.ist

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

• Высокая степень кастомизации:

• Тонкая настройка кода: можно настроить шрифт, размер, межстрочный интервал, межсимвольный интервал и другие детали кода по своему вкусу, а также выбрать различные стили подсветки синтаксиса, чтобы сделать код более читаемым.

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

• Разнообразные декоративные опции: поддерживаются декорирование строк, добавление шума на фон, частицы на фоне и другие декоративные элементы, повышающие визуальную привлекательность скриншота кода.

• Богатый выбор тем: включает набор готовых тем и позволяет пользователям создавать собственные. Встроено множество тем и стилей, можно свободно подобрать наиболее подходящую цветовую схему кода.

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

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

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

• Высокая производительность: построено на Vue 3, отличается высокой скоростью работы.

Техническая архитектура

• Фронтенд: основан на Vue.js, предоставляет богатые возможности взаимодействия и настройки пользовательского интерфейса.

• Бэкенд: в основном работает на Nuxt.js, поддерживает динамическую маршрутизацию и серверный рендеринг.

• Работа со стилями: реализована с помощью TailwindCSS, что обеспечивает гибкость и эффективность. Кроме того, проект предоставляет API-эндпоинт /healthcheck, который можно использовать для мониторинга состояния работоспособности сервиса.

Инструкция по использованию Chalk.ist

1. Перейдите на сайт Chalk.ist: откройте https://chalk.ist/.

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

3. Вставьте код: вставьте код, который хотите оформить, в редактор, где можно увидеть результат в режиме реального времени.

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

5. Экспортируйте скриншот: после завершения настройки нажмите кнопку «Экспорт», чтобы сохранить улучшенный скриншот кода локально. Можно выбрать формат PNG или SVG.

Способы развёртывания

Сайт http://chalk.ist/ разработан с помощью Nuxt.js для фронтенда и бэкенда, поддерживает быстрое развёртывание на Vercel, что очень удобно. Если вы хотите запустить его локально, выполните следующие шаги:

1. Клонируйте проект: выполните в терминале команду git clone https://github.com/Idered/chalk.ist.

2. Установите зависимости: используйте команду pnpm install для установки необходимых зависимостей проекта.

3. Запустите среду разработки: выполните команду pnpm run dev, чтобы запустить Chalk.ist локально.

Адрес открытого репозитория: https://github.com/Idered/chalk.ist

Связанные материалы:

Инструменты для украшения скриншотов