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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Dekoder Protocol Buffers

Dekoduj lokalnie bajty Protobuf z zapisu hex, Base64, Base64URL, tekstu lub pliku, analizuj pola i eksportuj prywatny raport.

Konwerter liczb szesnastkowych na dziesiętne

Przeliczaj liczby szesnastkowe na dziesiętne (system o podstawie 10). Działa z adresami pamięci, kodami błędów, kanałami RGB oraz liczbami całkowitymi o dowolnej precyzji.

Narzędzie jest dostępne w innych językach