Kod na obraz SVG
Zamień fragment kodu na obraz z podświetleniem składni, ramką okna i kolorowym tłem.
Kod na obraz SVG
Wklej fragment kodu, wybierz jego język programowania i narzędzie wyświetli go jako obraz z podświetleniem składni wewnątrz zaokrąglonym oknem — dokładnie taki screenshot kodu, który chciałbyś udostępnić na blogu, tweecie, prezentacji lub wewnętrznych dokumentach. Słowa kluczowe, ciągi, komentarze i liczby są automatycznie kolorowe, a okno ma opcjonalny pasek tytułu w stylu macOS z kolorowymi kropkami, więc rezultat wygląda jak prawdziwy edytor, a nie zwykły tekst.
Narzędzie obsługuje dziewięć języków — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL i zwykły tekst. Każdy język ma własne reguły do podświetlenia słów kluczowych, ciągów i komentarzy. Wybierz jeden z sześciu kolorowych motywów (zachód, ocean, północ, las, winogrono lub mono) i narzędzie otworzy okno pasującym gradientem. Dostosuj margines wokół okna, włącz cień, ustaw tytuł okna i niezależnie przełączaj numery linii lub pasek tytułu. Rozmiar czcionki skaluje cały obraz, więc krótka jednoliniowa funkcja i pięćdziesięciowierszowy kod będą czytelne.
Wynik jest samodzielnym dokumentem SVG, niezależnym od rozdzielczości — ostry w każdym rozmiarze, łatwy do wstawienia do strony lub narzędzia projektowego i wystarczająco mały, aby skopiować go jako tekst. Liczba linii, liczba znaków i ostateczny rozmiar obrazu w pikselach aktualizują się w czasie rzeczywistym poniżej wyniku podczas pisania lub zmieniania opcji, więc widzisz dokładnie to, co zamierzasz skopiować lub pobrać.
Wszystko dzieje się w twojej przeglądarce przy użyciu małego wbudowanego podświetlacza — kod się nie przesyła nigdzie i żadna zewnętrzna usługa nigdy nie widzi tego, co wklejasz. Dlatego jest bezpieczne do użytku na nieublikowanych funkcjach, wewnętrznych narzędziach lub czymkolwiek innym, czego nie chciałbyś wysyłać na serwer zewnętrzny tylko po to, aby zrobić ładny screenshot.