Code naar afbeelding: maak PNG- of SVG-screenshots van codefragmenten | We.Inc
Plak code en krijg er een strakke afbeelding van: syntaxkleuren, zes thema's, verloopachtergronden, vensterbalk, regelnummers en formaten voor social media. Exporteer een scherpe 2x PNG of een SVG. Gratis, in uw browser.
Code naar afbeelding generator
Een code-afbeelding is een plaatje van een fragment met syntaxkleuren, witruimte en een achtergrond, bedoeld voor slides, posts en documentatie waar echte codeblokken niet beschikbaar zijn. Plak hieronder code, kies een taal, thema en achtergrond, kies een formaat zoals 1200 bij 675 en download een scherpe PNG of een SVG.
Vooraf ingestelde formaten
Formaat
Pixels
Geschikt voor
Automatisch
Past zich aan de code aan
Documentatie, slides, README-bestanden
Liggend 16:9
1200 bij 675
Linkvoorbeelden en brede feedposts
Vierkant
1080 bij 1080
Vierkante feedposts
Staand 4:5
1080 bij 1350
Hoge feedposts
Plak of typ code, en de preview wordt meteen bijgewerkt. De taal wordt voor u herkend, of u kiest er een uit negen. PNG-bestanden worden op dubbele grootte geëxporteerd voor scherpe tekst op schermen met hoge pixeldichtheid.
Plak code in de editor. De taal wordt uit de inhoud afgeleid; pas hem aan als de gok niet klopt.
Kies een thema, een achtergrond en een formaat. Zet de vensterbalk en regelnummers aan of uit en stel de witruimte en lettergrootte in.
Voeg een bestandsnaam toe voor in de vensterbalk als dat de lezer helpt.
Download een PNG (gerenderd op 2x) of een SVG die de code als echte, selecteerbare tekst bewaart.
Houd fragmenten kort. Tien tot twintig regels lezen goed in een post; langere code hoort in een gist of een codeblok dat mensen kunnen kopiëren.
Gebruik een lettergrootte van 16 of meer voor social media posts, die vaak op telefoons worden bekeken.
Deelt u een afbeelding van code, deel de code dan ook als tekst of link. Schermlezers kunnen het plaatje niet lezen en niemand kan eruit kopiëren.
Kies een licht thema voor slides in felverlichte ruimtes en een donker thema voor schermen en social feeds.
Veelgestelde vragen
Wordt mijn code ergens geüpload?
Nee. Markering en export van de afbeelding gebeuren in uw browser. Er gaat niets naar een server, dus het is veilig voor privécode.
Waarom is de PNG twee keer zo groot als ik koos?
Hij wordt geëxporteerd op 2x pixeldichtheid zodat tekst scherp blijft op telefoon- en laptopschermen met hoge resolutie. Wordt hij op het gekozen formaat weergegeven, dan zitten er achter elke CSS-pixel vier beeldpixels.
Waarvoor dient de SVG-export?
SVG bewaart de code als tekst in een vectorafbeelding, dus hij schaalt naar elk formaat en in sommige viewers is de tekst nog te selecteren. Hij gebruikt het eigen monospace-lettertype van de viewer, dus op een andere computer kan hij er iets anders uitzien dan de PNG.
Hoe nauwkeurig is de syntaxmarkering?
Het is een lichte tokenizer die keywords, strings, getallen, commentaar, functies, tags en attributen kleurt. Dat dekt wat een fragment leesbaar maakt in een afbeelding. Het is geen volledige parser, dus ongebruikelijke syntax kan als gewone tekst worden gekleurd.
Code-afbeeldingen maken die mensen echt lezen
Snijd bij tot het deel dat ertoe doet. Laat imports en boilerplate weg, tenzij die het punt zijn, en markeer met commentaar de regel waar mensen naar moeten kijken.
Contrast telt in een afbeelding net zo zwaar als op een pagina. De thema's hier houden commentaar leesbaar maar rustiger dan de code, en houden strings en keywords duidelijk uit elkaar.
Alt-tekst voor code-afbeeldingen
Beschrijf bij het plaatsen van de afbeelding in de alt-tekst wat de code doet, bijvoorbeeld: JavaScript-functie die een zoekveld debouncet met 300 milliseconden. Plak de code zelf in de tekst van de post of in een reactie als het platform dat toestaat.
Middernacht
Gloed
Bos
Violette nacht
Papier
Zand
Lucht
Zonsondergang
Mint
Leisteen
Perzik
Geen
Automatisch
1200 bij 675
1080 bij 1080
1080 bij 1350
Maak een afbeelding
Code
Taal
Herkennen ({lang})
Formaat
Witruimte: {n}px
Lettergrootte: {n}px
Bestandsnaam
Vensterbalk
Regelnummers
Thema
Achtergrond
Preview van de {lang}-code-afbeelding
{w} bij {h} px (PNG wordt geëxporteerd op {w2} bij {h2})