Code naar afbeelding

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 voor een blogpost, presentatie, README of socialemediabericht. Het accentueert meer dan 20 talen, waaronder JavaScript, TypeScript, Python, Go, Rust, Java, SQL en meer, met een optionele automatische detectie die de taal uit je code raadt. Kleed de kaart aan met een van zeven thema's, een vooraf ingesteld verloop, een aangepaste kleur of verloop, of een transparante achtergrond, en verfijn daarna het monospace-lettertype, de tekengrootte, de opvulling, de regelnummers, de venstertitel en de uitvoerbreedte. De kaart wordt live gerenderd terwijl je bewerkt, en je kunt hem exporteren als PNG op 1x, 2x of 3x, opslaan als SVG of naar het klembord kopiëren.

Code naar afbeelding gebruiken

1. Plak of typ je code, of verbind de tekstuitvoer van een andere tool met de invoerpoort in de werkruimte.
2. Kies de bijpassende taal of schakel Automatisch detecteren in bij Instellingen om de tool hem uit je code te laten raden.
3. Kies een thema en een achtergrond — een vooraf ingesteld verloop, een aangepaste effen kleur of verloop, of transparant — bij Instellingen.
4. Verfijn naar wens het monospace-lettertype, de tekengrootte, de opvulling, de regelnummers, de venstertitel en de uitvoerbreedte.
5. Zie de live voorbeeldweergave bijwerken terwijl je bewerkt; klik erop om hem te vergroten in de zoomweergave.
6. Exporteer de kaart als PNG op 1x–3x, download hem als SVG of kopieer de afbeelding naar je klembord.

Voorbeelden

Veelgestelde vragen

Welke talen kan het accentueren?

Meer dan 20, waaronder JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift en GraphQL. Kies er een uit het menu of schakel Automatisch detecteren in om de taal uit je code te laten raden.

Wat kan ik exporteren, en in welke kwaliteit?

Exporteer een PNG op 1x-, 2x- of 3x-pixeldichtheid, sla een vector-SVG op of kopieer de afbeelding rechtstreeks naar je klembord. Als je de transparante achtergrond kiest, behoudt de PNG een alfakanaal zonder achtergrond achter de kaart.

Kan ik de look van de kaart wijzigen?

Ja. Wissel tussen zeven thema's, kies een vooraf ingesteld verloop, een aangepaste effen kleur of verloop, of een transparante achtergrond, en pas het monospace-lettertype, de tekengrootte, de opvulling, de regelnummers, de bewerkbare venstertitel en de uitvoerbreedte aan.

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 Downloaden, Afbeelding kopiëren of SVG downloaden drukt, zodat typen de afbeelding niet bij elke toetsaanslag opnieuw vastlegt. De gestylde voorbeeldweergave werkt nog steeds live bij; in de werkruimte wordt de PNG automatisch opnieuw opgebouwd zodat hij naar de volgende tool kan stromen.