Code naar afbeelding
Zet een codefragment in je browser om in een verzorgde PNG-kaart met syntaxisaccentuering, met een thema, verloop- of transparante achtergrond en opvulling — zonder uploaden.
Code naar afbeelding — Plak een fragment, kies de taal, het thema, de achtergrond en de opvulling en exporteer een codekaart in Carbon-stijl als een transparante of met verloop gevulde PNG. De syntaxisaccentuering (Prism) en de beeldopname (html-to-image) draaien volledig in je browser, zodat je code nooit wordt geüpload. De voorbeeldweergave werkt live bij terwijl je typt of opties wisselt.
Wat is Code naar afbeelding?
Code naar afbeelding is een gratis tool in de browser die een codefragment omzet in een deelbare afbeelding — een gestileerde codekaart met syntaxisaccentuering die je in een blogpost, presentatie, README of socialemediabericht kunt plaatsen. Het is populair bij ontwikkelaars, technisch schrijvers en docenten die hun code doelbewust willen laten ogen in plaats van een vlakke schermafbeelding te plakken. Kies accentuering voor JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python of Bash en kleed de kaart vervolgens aan met een thema, een verloop- of effen achtergrond en de opvulling van je voorkeur. De kaart wordt live gerenderd terwijl je bewerkt, en met één knop PNG downloaden exporteer je hem op 2x resolutie.
Code naar afbeelding gebruiken
- Plak of typ je code in de editor, of verbind de tekstuitvoer van een andere tool met de invoerpoort in de werkruimte.
- Kies de bijpassende taal — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python of Bash — zodat de syntaxisaccentuering klopt.
- Open Instellingen om een thema (Midnight, Graphite of Snow), een achtergrond (Aurora, Sunset, Ocean, Slate of Transparant) en de opvulling (Krap, Normaal of Ruim) te kiezen.
- Zie de live voorbeeldweergave bijwerken terwijl je typt en opties wijzigt; klik erop om hem te vergroten in de zoomweergave.
- Druk op PNG downloaden om de kaart op te slaan als afbeelding met hoge resolutie, of stuur de PNG in de werkruimte rechtstreeks door naar een afbeeldingstool verderop.
Voorbeelden
Een JavaScript-functie voor een blogpost
Plak een korte JavaScript-functie, houd de taal op JavaScript, kies het thema Midnight met de verloopachtergrond Aurora en download een scherpe PNG om in een artikel in te sluiten in plaats van een vlakke schermafbeelding.
Een transparant CSS-fragment voor dia's
Zet de taal op CSS en de achtergrond op Transparant zodat de geëxporteerde PNG geen achtergrond heeft, waardoor de codekaart netjes op een gekleurde dia-achtergrond ligt.
Een Bash-opdrachtkaart voor een README
Selecteer Bash, kies het lichte thema Snow met de effen achtergrond Slate en ruime opvulling en exporteer een nette, leesbare opdrachtkaart voor de documentatie van je project.
Veelgestelde vragen
- Welke talen kan het accentueren?
- Het accentueert JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python en Bash. Kies de taal die bij je fragment past uit het taalmenu; als een token niet kan worden geclassificeerd, valt het simpelweg terug op de basistekstkleur.
- In welk afbeeldingsformaat exporteert het?
- Het exporteert een PNG op 2x pixeldichtheid voor scherpe resultaten. Als je de achtergrondoptie Transparant kiest, behoudt de PNG een alfakanaal zonder enige achtergrond achter de codekaart.
- Kan ik de look van de kaart wijzigen?
- Ja. In Instellingen kun je wisselen tussen de thema's Midnight, Graphite en Snow, een achtergrond Aurora, Sunset, Ocean, Slate of Transparant kiezen en een opvulling Krap, Normaal of Ruim rond de code instellen.
- Wordt mijn code ergens geüpload?
- Nee. Zowel de syntaxisaccentuering (Prism) als de beeldopname (html-to-image) draaien voor 100% aan de clientzijde, in je browser. Je code wordt nooit geüpload, naar onze servers verstuurd of gedeeld, dus zelfs vertrouwelijke fragmenten blijven op je apparaat.
- Waarom verschijnt de afbeelding pas als ik op Downloaden klik op de toolpagina?
- Op de losse pagina wordt de PNG gegenereerd wanneer je op PNG downloaden drukt, zodat typen de afbeelding niet bij elke toetsaanslag opnieuw vastlegt. De gestylde voorbeeldweergave werkt tijdens het bewerken nog steeds live bij; in de werkruimte wordt de PNG bovendien automatisch opnieuw opgebouwd zodat hij naar de volgende tool kan stromen.
Gerelateerde tools
Kleurcontrastcontrole
Controleer de WCAG-contrastverhouding tussen een voorgrond- en achtergrond-HEX-kleur en zie of deze AA en AAA haalt voor zowel normale als grote tekst.
Kleurenmenger
Meng twee HEX-kleuren in een gekozen verhouding in de RGB- of Lab-kleurruimte en lees de resulterende tussenkleur terug als staal en kopieerbare HEX-waarde.
Kleurtinten-generator
Zet één HEX-basiskleur om in een Tailwind-achtige tintenschaal van 50-950, gemengd naar wit en zwart, met per stap een staal en een kopieerbare HEX.
Kleurenblindheid-simulator
Upload een afbeelding en bekijk een voorbeeld van hoe deze eruitziet bij protanopie, deuteranopie, tritanopie of volledige kleurenblindheid, en download daarna het gesimuleerde resultaat.