Kod na obraz: zamień fragmenty kodu w zrzuty PNG lub SVG | We.Inc
Wklej kod i pobierz jego czysty obraz: kolorowanie składni, sześć motywów, gradientowe tła, pasek okna, numery linii i rozmiary do mediów społecznościowych. Eksportuj ostry PNG 2x lub SVG. Za darmo, w Twojej przeglądarce.
Generator obrazów z kodu
Obraz kodu to grafika z fragmentem kodu, kolorowaniem składni, marginesem i tłem, przygotowana do slajdów, postów i dokumentacji, gdzie prawdziwe bloki kodu nie są dostępne. Wklej kod poniżej, wybierz język, motyw i tło, ustaw rozmiar, na przykład 1200 na 675, i pobierz ostry PNG lub SVG.
Gotowe rozmiary
Ustawienie
Piksele
Zastosowanie
Auto
Dopasowany do kodu
Dokumentacja, slajdy, pliki README
Poziomy 16:9
1200 na 675
Podglądy linków i szerokie posty w feedzie
Kwadrat
1080 na 1080
Kwadratowe posty w feedzie
Pionowy 4:5
1080 na 1350
Wysokie posty w feedzie
Wklej lub wpisz kod, a podgląd aktualizuje się na bieżąco. Język jest wykrywany automatycznie, możesz też wybrać jeden z dziewięciu. Pliki PNG są eksportowane w podwójnym rozmiarze, aby tekst był ostry na ekranach o dużej gęstości pikseli.
Wklej kod do edytora. Język jest odgadywany na podstawie treści; zmień go, jeśli wybór jest błędny.
Wybierz motyw, tło i rozmiar. Włącz lub wyłącz pasek okna i numery linii, ustaw margines i rozmiar czcionki.
Dodaj nazwę pliku wyświetlaną na pasku okna, jeśli pomoże to czytelnikowi.
Pobierz PNG (renderowany w 2x) lub SVG, który zachowuje kod jako prawdziwy tekst do zaznaczenia.
Trzymaj fragmenty krótkie. Dziesięć do dwudziestu linii dobrze czyta się w poście; dłuższy kod powinien trafić do gista lub bloku kodu, który można skopiować.
W postach w mediach społecznościowych, często oglądanych na telefonach, używaj czcionki o rozmiarze 16 lub większym.
Gdy udostępniasz obraz kodu, udostępnij też kod jako tekst lub link. Czytniki ekranu nie odczytają obrazka i nikt nie skopiuje z niego kodu.
Wybierz jasny motyw do slajdów pokazywanych w jasnych salach, a ciemny do ekranów i feedów społecznościowych.
Najczęściej zadawane pytania
Czy mój kod jest gdzieś wysyłany?
Nie. Kolorowanie składni i eksport obrazu odbywają się w Twojej przeglądarce. Nic nie trafia na serwer, więc narzędzie jest bezpieczne także dla prywatnego kodu.
Dlaczego PNG jest dwa razy większy niż wybrany rozmiar?
Jest eksportowany z gęstością pikseli 2x, aby tekst pozostał ostry na ekranach telefonów i laptopów o wysokiej rozdzielczości. Przy wyświetlaniu w wybranym rozmiarze na każdy piksel CSS przypadają cztery piksele obrazu.
Do czego służy eksport do SVG?
SVG zachowuje kod jako tekst wewnątrz obrazu wektorowego, więc skaluje się do dowolnego rozmiaru, a w niektórych przeglądarkach plików tekst nadal można zaznaczyć. Używa czcionki o stałej szerokości dostępnej u oglądającego, więc na innym komputerze może wyglądać nieco inaczej niż PNG.
Jak dokładne jest kolorowanie składni?
To lekki tokenizer, który koloruje słowa kluczowe, ciągi znaków, liczby, komentarze, funkcje, tagi i atrybuty. To wystarcza, by fragment kodu był czytelny na obrazie. Nie jest to pełny parser, więc nietypowa składnia może zostać pokolorowana jak zwykły tekst.
Jak tworzyć obrazy kodu, które ludzie czytają
Przytnij kod do tego, co ważne. Usuń importy i kod szablonowy, chyba że to one są tematem, i oznacz komentarzem linię, na którą ludzie mają spojrzeć.
Kontrast jest na obrazie tak samo ważny jak na stronie. Tutejsze motywy utrzymują komentarze czytelne, ale cichsze niż kod, a ciągi znaków i słowa kluczowe wyraźnie od siebie oddzielone.
Tekst alternatywny dla obrazów kodu
Publikując obraz, opisz w tekście alternatywnym, co robi kod, na przykład: funkcja JavaScript, która opóźnia (debounce) pole wyszukiwania o 300 milisekund. Wklej sam kod w treści posta lub w odpowiedzi, jeśli platforma na to pozwala.