Код у зображення SVG
Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису, вікном редактора та градієнтним фоном.
Код у зображення SVG
Вставте фрагмент коду, виберіть мову програмування і цей інструмент відрендеризує його як гарно оформлене зображення з підсвічуванням синтаксису у вікні редактора — саме такий скриншот коду, який ви хотіли б поділитися в блозі, твіті, презентації або внутрішній документації. Ключові слова, рядки, коментарі та цифри автоматично розфарбовуються різними кольорами, а вікно отримує стилізований під macOS заголовок з кольоровими крапками, так що результат виглядає як справжній редактор, а не просто текст.
Підтримується дев'ять мов програмування — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL та простий текст, кожна зі своїми правилами підсвічування для ключових слів, рядків та коментарів. Виберіть один з шести градієнтних фонів (захід сонця, океан, опівніч, ліс, виноград або монохром) і інструмент обгорне вікно відповідною кольоровою рамкою. Відрегулюйте відступ навколо вікна, увімкніть тінь, встановіть назву файлу і незалежно перемикайте номери рядків або заголовок. Розмір шрифту масштабує все зображення цілком, тому і однорядковий код, і п'ятидесятирядкова функція залишаються добре читаними.
Результат — це повністю самостійний, незалежний від дозволу екрана документ SVG: чіткий в будь-якому розмірі, легко вставляється прямо на сторінку або в дизайнерський інструмент, досить компактний для копіювання як текст. Кількість рядків, кількість символів і розмір результуючого зображення в пікселях оновлюються в реальному часі під результатом по мірі введення або зміни опцій, тому ви бачите точно, що ви збираєтеся скопіювати або завантажити.
Все відбувається у вашому браузері за допомогою вбудованого лексера — жоден код не відправляється назовні і жоден зовнішній сервіс ніколи не бачить, що ви вставляєте. Це робить інструмент безпечним для використання на неопублікованих функціях, внутрішніх інструментах або чомусь іншому, що ви не хочете відправляти на зовнішній сервер тільки для створення красивого скриншота.