Softonic

Kod na obraz

Krok 1 / 2

Wklej fragment kodu, wybierz jeden z czterech wbudowanych motywów, dopasuj kolory, rozmiar czcionki, odstępy, opcjonalny nagłówek i numery wierszy, a potem pobierz PNG wyrenderowany z canvasu w przeglądarce. Narzędzie rysuje zwykły tekst, więc dobrze nadaje się do czystych obrazów z kodem, ale nie analizuje języków i nie dodaje podświetlania składni.

Jak utworzyć PNG z kodem

  1. 1

    Wklej fragment

    Użyj pola kodu dla JavaScriptu, HTML, CSS, JSON, poleceń shell albo dowolnego innego zwykłego tekstu. Renderer zachowuje maksymalnie pierwsze 400 wierszy.

  2. 2

    Ustaw wygląd

    Wybierz Ciemny, Jasny, Dracula lub Solarized, a następnie dopasuj tytuł, rozmiar czcionki, odstępy, tło, tekst i kolor akcentu.

  3. 3

    Sprawdź canvas

    Przeglądarka rysuje każdy wiersz jako tekst na canvasie, opcjonalnie z nagłówkiem okna i numerami wierszy. Długie wiersze mogą poszerzyć canvas do wbudowanego maksimum.

  4. 4

    Pobierz PNG

    Wyeksportuj bieżący canvas jako obraz PNG do dokumentacji, notatek, slajdów lub postów. Eksport SVG, JPEG ani HTML nie jest dostępny.

Co robi renderer

Opcja Co możesz zmienić Uwagi
Motyw Ciemny, Jasny, Dracula, Solarized Każdy motyw ustawia początkowe kolory tła, tekstu i akcentu.
Styl tekstu Tytuł, rozmiar czcionki, odstępy Rozmiar czcionki jest ograniczony do 10–40 px, a odstępy do 20–200 px.
Kolory Tło, tekst, akcent Kolor akcentu jest używany przy numerach wierszy.
Nagłówek Nagłówek w stylu okna włączony lub wyłączony Tytuł pojawia się w nagłówku, gdy jest aktywny.
Numery wierszy Pokaż lub ukryj Numery są rysowane jako zwykły tekst na canvasie.
Eksport Pobranie PNG Przycisk pobierania zapisuje bieżący canvas jako obraz PNG.

Praktyczne limity

  • Przeglądarka rysuje fragment jako zwykły tekst z użyciem Canvas API. Nie rozpoznaje JavaScriptu, Pythona, HTML ani innych języków.
  • Podgląd używa pierwszych 400 wierszy, aby bardzo duże pliki nie blokowały strony.
  • Szerokość canvasu pozostaje między 420 px a 2200 px. Bardzo długie wiersze mogą dojść do maksymalnej szerokości.
  • Wersja dwuetapowa przechowuje wpisane dane w sessionStorage dla bieżącej karty przeglądarki podczas przejścia od edycji do pobierania.

Dostępność

Kodu w obrazie nie da się przeszukać, skopiować ani odczytać czytnikiem ekranu. Traktuj PNG jako wsparcie wizualne, a w dokumentacji, tutorialach lub zgłoszeniach błędów umieszczaj prawdziwy fragment również jako zaznaczalny tekst.

Najczęściej zadawane pytania

Nie. Rysuje na canvasie dokładnie ten tekst, który wkleisz. Możesz zmieniać kolory i motywy, ale nie ma wyboru języka ani parsera składni.

Menu zawiera Ciemny, Jasny, Dracula i Solarized. Po wyborze motywu nadal możesz nadpisać tło, tekst i kolor akcentu.

Nie. Wynikiem jest pobranie PNG utworzonego z canvasu. Nie ma eksportu SVG, JPEG ani kopiowania jako HTML.

Podgląd rysuje pierwsze 400 wierszy, aby przeglądarka działała płynnie. Do publikowanych obrazów zwykle lepiej wybrać kilka wierszy, które wyjaśniają sedno.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.