Kod na obraz
Zamień fragment kodu na dopracowaną kartę PNG z podświetlaniem składni w przeglądarce, z motywem, tłem gradientowym lub przezroczystym oraz wypełnieniem — bez przesyłania.
Kod na obraz — Wklej fragment, wybierz jego język, motyw, tło i wypełnienie, a następnie wyeksportuj kartę kodu w stylu Carbon jako przezroczysty PNG lub z tłem gradientowym. Podświetlanie składni (Prism) i przechwytywanie obrazu (html-to-image) działają w całości w Twojej przeglądarce, więc Twój kod nigdy nie jest przesyłany. Podgląd aktualizuje się na żywo podczas pisania lub zmiany opcji.
Czym jest Kod na obraz?
Kod na obraz to darmowe narzędzie działające w przeglądarce, które zamienia fragment kodu w obraz do udostępniania — stylową kartę kodu z podświetlaniem składni, którą możesz wstawić do wpisu na blogu, prezentacji, pliku README lub posta w mediach społecznościowych. Jest popularne wśród programistów, autorów dokumentacji technicznej i nauczycieli, którzy chcą, aby ich kod wyglądał przemyślanie, zamiast wklejać płaski zrzut ekranu. Wybierz podświetlanie dla JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python lub Bash, a następnie ubierz kartę w motyw, tło gradientowe lub jednolite oraz preferowane wypełnienie. Karta renderuje się na żywo podczas edycji, a pojedynczy przycisk Pobierz PNG eksportuje ją w rozdzielczości 2x.
Jak używać Kod na obraz
- Wklej lub wpisz kod w edytorze albo podłącz wyjście tekstowe innego narzędzia do portu wejściowego w przestrzeni roboczej.
- Wybierz odpowiedni język — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python lub Bash — aby podświetlanie składni było prawidłowe.
- Otwórz Ustawienia, aby wybrać motyw (Midnight, Graphite lub Snow), tło (Aurora, Sunset, Ocean, Slate lub Przezroczyste) oraz wypełnienie (Ciasne, Normalne lub Przestronne).
- Obserwuj, jak podgląd na żywo aktualizuje się podczas pisania i zmiany opcji; kliknij go, aby powiększyć w widoku zoomu.
- Naciśnij Pobierz PNG, aby zapisać kartę jako obraz w wysokiej rozdzielczości, lub w przestrzeni roboczej przekaż PNG bezpośrednio do kolejnego narzędzia graficznego.
Przykłady
Funkcja JavaScript do wpisu na blogu
Wklej krótką funkcję JavaScript, pozostaw język na JavaScript, wybierz motyw Midnight z gradientowym tłem Aurora i pobierz ostry PNG, aby osadzić go w artykule zamiast płaskiego zrzutu ekranu.
Przezroczysty fragment CSS na slajdy
Zmień język na CSS, a tło na Przezroczyste, aby wyeksportowany PNG nie miał tła, dzięki czemu karta kodu czysto leży na kolorowym tle slajdu.
Karta polecenia Bash do pliku README
Wybierz Bash, zastosuj jasny motyw Snow z jednolitym tłem Slate i Przestronnym wypełnieniem oraz wyeksportuj czytelną, schludną kartę polecenia do dokumentacji projektu.
Najczęściej zadawane pytania
- Jakie języki może podświetlać?
- Podświetla JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python i Bash. Wybierz z listy rozwijanej języków ten pasujący do Twojego fragmentu; jeśli tokenu nie da się sklasyfikować, po prostu wraca on do podstawowego koloru tekstu.
- W jakim formacie obrazu eksportuje?
- Eksportuje PNG w 2x gęstości pikseli dla ostrych wyników. Jeśli wybierzesz opcję tła Przezroczyste, PNG zachowuje kanał alfa bez żadnego tła za kartą kodu.
- Czy mogę zmienić wygląd karty?
- Tak. W Ustawieniach możesz przełączać się między motywami Midnight, Graphite i Snow, wybrać tło Aurora, Sunset, Ocean, Slate lub Przezroczyste oraz ustawić wypełnienie Ciasne, Normalne lub Przestronne wokół kodu.
- Czy mój kod jest gdzieś przesyłany?
- Nie. Zarówno podświetlanie składni (Prism), jak i przechwytywanie obrazu (html-to-image) działają w 100% po stronie klienta, w Twojej przeglądarce. Twój kod nigdy nie jest przesyłany, wysyłany na nasze serwery ani udostępniany, więc nawet poufne fragmenty pozostają na Twoim urządzeniu.
- Dlaczego obraz pojawia się dopiero po kliknięciu Pobierz na stronie narzędzia?
- Na samodzielnej stronie PNG jest generowany po naciśnięciu Pobierz PNG, więc pisanie nie przechwytuje ponownie obrazu przy każdym naciśnięciu klawisza. Stylizowany podgląd nadal aktualizuje się na żywo podczas edycji; w przestrzeni roboczej PNG jest dodatkowo automatycznie odbudowywany, aby mógł przepłynąć do następnego narzędzia.
Powiązane narzędzia
Sprawdzanie kontrastu kolorów
Sprawdź współczynnik kontrastu WCAG między kolorem HEX pierwszego planu a tłem i zobacz, czy spełnia AA i AAA dla tekstu normalnego i dużego.
Mikser kolorów
Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.
Generator odcieni koloru
Zamień jeden bazowy kolor HEX w skalę odcieni 50-950 w stylu Tailwind, mieszając go w stronę bieli i czerni; każdy stopień z próbką i kopiowalnym HEX-em.
Symulator daltonizmu
Prześlij obraz i zobacz podgląd tego, jak wygląda przy protanopii, deuteranopii, tritanopii lub całkowitej ślepocie barw, a następnie pobierz symulowany wynik.