Kod na obraz

Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.

Ładowanie narzędzia…

Kod na obraz — Wklej fragment, wybierz jego język (lub pozwól, by odgadło go automatyczne wykrywanie) i nadaj styl karcie kodu w stylu Carbon z motywem, tłem gradientowym, jednolitym, własnym lub przezroczystym, regulowaną czcionką o stałej szerokości, numerami wierszy i edytowalnym tytułem okna. Wyeksportuj ją jako PNG w skali 1x–3x lub jako SVG, albo skopiuj obraz prosto do schowka. 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.

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 do wpisu na blogu, prezentacji, pliku README lub posta w mediach społecznościowych. Podświetla ponad 20 języków, w tym JavaScript, TypeScript, Python, Go, Rust, Java, SQL i inne, z opcjonalnym automatycznym wykrywaniem, które odgaduje język na podstawie Twojego kodu. Ubierz kartę w jeden z siedmiu motywów, gotowy gradient, własny kolor lub gradient, albo przezroczyste tło, a następnie dopracuj czcionkę o stałej szerokości, rozmiar czcionki, wypełnienie, numery wierszy, tytuł okna i szerokość wyjścia. Karta renderuje się na żywo podczas edycji, a możesz ją wyeksportować jako PNG w 1x, 2x lub 3x, zapisać jako SVG lub skopiować do schowka.

Jak używać Kod na obraz

  1. Wklej lub wpisz kod albo podłącz wyjście tekstowe innego narzędzia do portu wejściowego w przestrzeni roboczej.
  2. Wybierz odpowiedni język lub włącz Automatyczne wykrywanie w Ustawieniach, aby narzędzie odgadło go z Twojego kodu.
  3. Wybierz motyw i tło — gotowy gradient, własny kolor jednolity lub gradient, albo przezroczyste — w Ustawieniach.
  4. Dopracuj według uznania czcionkę o stałej szerokości, rozmiar czcionki, wypełnienie, numery wierszy, tytuł okna i szerokość wyjścia.
  5. Obserwuj, jak podgląd na żywo aktualizuje się podczas edycji; kliknij go, aby powiększyć w widoku zoomu.
  6. Wyeksportuj kartę jako PNG w 1x–3x, pobierz ją jako SVG lub skopiuj obraz do schowka.

Przykłady

Fragment Go z numerami wierszy

Wklej funkcję Go, włącz Automatyczne wykrywanie, aby język został dobrany za Ciebie, włącz numery wierszy, wybierz motyw Nord i wyeksportuj PNG 2x do samouczka.

Karta marki z własnym gradientem

Ustaw tło na Własny gradient, wybierz dwa kolory swojej marki i kąt, dodaj tytuł okna taki jak app.tsx i skopiuj obraz prosto do schowka.

Skalowalny SVG do dokumentacji

Wybierz jasny motyw Snow, ustaw szerokość wyjścia i pobierz SVG, aby karta kodu pozostała ostra w dowolnym rozmiarze w Twojej dokumentacji.

Najczęściej zadawane pytania

Jakie języki może podświetlać?
Ponad 20, w tym JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift i GraphQL. Wybierz jeden z menu lub włącz Automatyczne wykrywanie, aby język został odgadnięty z Twojego kodu.
Co mogę wyeksportować i w jakiej jakości?
Wyeksportuj PNG w gęstości pikseli 1x, 2x lub 3x, zapisz wektorowy SVG lub skopiuj obraz prosto do schowka. Wybór przezroczystego tła sprawia, że PNG zachowuje kanał alfa bez żadnego tła za kartą.
Czy mogę zmienić wygląd karty?
Tak. Przełączaj między siedmioma motywami, wybierz gotowy gradient, własny kolor jednolity lub gradient, albo przezroczyste tło, i dostosuj czcionkę o stałej szerokości, rozmiar czcionki, wypełnienie, numery wierszy, edytowalny tytuł okna i szerokość wyjścia.
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, Kopiuj obraz lub Pobierz SVG, więc pisanie nie przechwytuje ponownie obrazu przy każdym naciśnięciu klawisza. Stylizowany podgląd nadal aktualizuje się na żywo; w przestrzeni roboczej PNG jest automatycznie odbudowywany, aby mógł przepłynąć do następnego narzędzia.

Powiązane narzędzia

Sprawdzanie kontrastu kolorów

Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.

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ę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.

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.