Код в изображение SVG

Код в изображение SVG

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

Поддерживается девять языков программирования — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL и простой текст, каждый со своими правилами подсветки для ключевых слов, строк и комментариев. Выберите один из шести градиентных фонов (закат, океан, полночь, лес, виноград или монохром) и инструмент обернёт окно подходящей цветной рамкой. Отрегулируйте отступ вокруг окна, включите тень, установите название файла и независимо переключайте номера строк или заголовок. Размер шрифта масштабирует всё изображение целиком, поэтому и однострочный код, и пятидесятистрочная функция остаются хорошо читаемыми.

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

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

FAQ