Softonic

Code naar afbeelding

Stap 1 / 2

Plak een codefragment, kies een van de vier ingebouwde thema’s, stel kleuren, lettergrootte, padding, optionele kopbalk en regelnummers in en download een PNG die vanuit een browsercanvas is gerenderd. De tool tekent platte tekst: handig voor nette codeafbeeldingen, maar hij analyseert geen talen en voegt geen syntaxmarkering toe.

Zo maak je een code-PNG

  1. 1

    Plak je fragment

    Gebruik het codeveld voor JavaScript, HTML, CSS, JSON, shellcommando’s of andere platte tekst. De renderer gebruikt maximaal de eerste 400 regels.

  2. 2

    Stel de stijl in

    Kies Donker, Licht, Dracula of Solarized en pas daarna titel, lettergrootte, padding, achtergrond, tekst en accentkleur aan.

  3. 3

    Bekijk het canvas

    De browser tekent elke regel als canvastype, met optionele vensterkop en regelnummers. Lange regels kunnen het canvas verbreden tot de ingebouwde maximumwaarde.

  4. 4

    Download de PNG

    Exporteer het huidige canvas als PNG-afbeelding voor documentatie, notities, slides of posts. SVG-, JPEG- en HTML-export zijn niet inbegrepen.

Wat de renderer doet

Bediening Wat je kunt aanpassen Opmerkingen
Thema Donker, Licht, Dracula, Solarized Elk thema zet de beginkleuren voor achtergrond, tekst en accent.
Tekststijl Titel, lettergrootte, padding Lettergrootte is beperkt tot 10–40 px en padding tot 20–200 px.
Kleuren Achtergrond, tekst, accent De accentkleur wordt gebruikt voor regelnummers.
Kopbalk Vensterachtige kopbalk aan of uit De titel verschijnt in de kopbalk wanneer die actief is.
Regelnummers Tonen of verbergen Regelnummers worden als gewone canvastype getekend.
Export PNG-download De downloadknop bewaart het huidige canvas als PNG-afbeelding.

Praktische grenzen

  • De browser tekent het fragment als platte tekst met de Canvas API. JavaScript, Python, HTML of andere talen worden niet herkend.
  • De voorvertoning gebruikt de eerste 400 regels zodat zeer grote bestanden de pagina niet laten vastlopen.
  • De canvasbreedte blijft tussen 420 px en 2200 px. Zeer lange regels kunnen de maximale breedte bereiken.
  • De versie met twee stappen bewaart je invoer in sessionStorage voor het huidige browsertabblad terwijl je van bewerken naar downloaden gaat.

Toegankelijkheid

Code in een afbeelding is niet doorzoekbaar, niet kopieerbaar en niet beschikbaar voor schermlezers. Gebruik de PNG als visuele ondersteuning en plaats het echte fragment bij documentatie, tutorials of bugrapporten ook als selecteerbare tekst.

Veelgestelde vragen

Nee. Hij tekent precies de tekst die je plakt op een canvas. Je kunt kleuren en thema’s wijzigen, maar er is geen taalselector of syntaxparser.

Het menu bevat Donker, Licht, Dracula en Solarized. Daarna kun je achtergrond, tekst en accentkleur alsnog overschrijven.

Nee. De uitvoer is een PNG-download die uit het canvas wordt gemaakt. SVG, JPEG en kopiëren als HTML zijn niet beschikbaar.

De voorvertoning tekent de eerste 400 regels om de browser snel te houden. Voor gepubliceerde afbeeldingen is het meestal beter om terug te snijden tot de paar regels die het idee uitleggen.

Gerelateerde tools

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

Tool beschikbaar in andere talen