Hoppa till innehåll

Kod till SVG-bild

Omvandla ett kodavsnitt till en bild med syntaxmarkering, fönsterram och färgövergang.

Inmatning
14
48
Utmatning

Kod till SVG-bild

Klistra in ett kodavsnitt, välj programmeringsspråk och det här verktyget skapar automatiskt en syntaxmarkerad bild i en rundad fönsterram — exakt den sorts kodskärmavbild du vill dela i en blogg, en tweet, en presentation eller intern dokumentation. Nyckelord, strängar, kommentarer och siffror färgmarkeras automatiskt, och fönstret kan valfritt få en macOS-liknande titelrad med färgade prickar så att resultatet ser ut som en riktig editor, inte bara oformaterad text.

Verktyget stöder nio programmeringsspråk — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL och oformaterad text — var och en med sina egna regler för markering av nyckelord, strängar och kommentarer. Välj ett av sex färggradient-teman (solnedgång, hav, midnatt, skog, druva eller mono) och verktyget omsluter fönstret med en matchande färgöverdelning. Justera utfyllnaden runt fönstret, aktivera skuggeffekter, ange fönstrets titel och slå radnummer eller titelraden på eller av oberoende. Teckenstorlek skalar hela bilden, så både en kort enrads funktion och en femtio-rads funktion förblir läsbar.

Resultatet är ett fristående, upplösningsoberoende SVG-dokument — skarpt i alla storlekar och enkelt att bädda in direkt i en sida eller designverktyg. Radantal, teckenantal och den slutgiltiga bildstorleken i pixlar uppdateras live under utdata när du skriver eller ändrar inställningar, så du ser exakt vad du ska kopiera eller ladda ner.

Allt sker i din webbläsare med en liten inbyggd syntaxmarkering — kod laddas aldrig upp och ingen extern syntaxmarkeringstjänst ser någonsin vad du klistrar in. Det gör det säkert att använda på opublicerade funktioner, interna verktyg eller vad som helst annat som du hellre inte vill skicka till en extern server bara för att göra en fin skärmbild.

FAQ

Vilka programmeringsspråk får syntaxmarkering?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash och SQL får alla markering för nyckelord, strängar, kommentarer och siffror. Välj "Oformaterad text" för allt annat — det återges utan färgkodning.
Kan jag ändra bakgrund och fönsterutseende?
Ja. Välj ett av sex färggradient-teman, justera utfyllnaden runt fönstret, aktivera skugga och slå titelraden med färgade prickar och radnummer på eller av oberoende.
Vilket format är bilden och kan jag få PNG?
Resultatet är en vektor-SVG — skarp i alla storlekar och lätt att bädda in direkt i en sida. För PNG öppnar du den nedladdade .svg-filen i din webbläsare eller bildeditor och exporterar den som PNG; det här verktyget gör det inte automatiskt.
Finns det en gräns för hur mycket kod jag kan klistra in?
Ingen fast radgräns, men den genererade bilden är begränsad till 10 MB. Extremt långa avsnitt som skulle överskrida denna gräns skapar ett meddelande som ber dig förkorta inmatningen.
Laddas min kod upp någonstans?
Nej. Syntaxmarkering och bildrendering sker helt i din webbläsare med en liten inbyggd tokenizer — din kod lämnar aldrig din enhet.