Softonic

Kod till bild

Steg 1 / 2

Klistra in ett kodavsnitt, välj ett av de fyra inbyggda temana, justera färger, teckenstorlek, utfyllnad, valfritt fönsterhuvud och radnummer och ladda sedan ner en PNG som renderas från en canvas i webbläsaren. Verktyget ritar vanlig text, så det passar för rena kodbilder men analyserar inte språk och lägger inte till syntaxmarkering.

Så skapar du en kod-PNG

  1. 1

    Klistra in avsnittet

    Använd kodfältet för JavaScript, HTML, CSS, JSON, shellkommandon eller annan vanlig text. Renderaren tar med högst de första 400 raderna.

  2. 2

    Ställ in utseendet

    Välj Mörk, Ljus, Dracula eller Solarized och justera sedan titel, teckenstorlek, utfyllnad, bakgrund, text och accentfärg.

  3. 3

    Kontrollera canvasen

    Webbläsaren ritar varje rad som canvastext, med valfritt fönsterhuvud och radnummer. Långa rader kan bredda canvasen upp till den inbyggda maxgränsen.

  4. 4

    Ladda ner PNG

    Exportera aktuell canvas som PNG-bild för dokumentation, anteckningar, presentationer eller inlägg. SVG-, JPEG- och HTML-export ingår inte.

Vad renderaren gör

Kontroll Vad du kan ändra Kommentar
Tema Mörk, Ljus, Dracula, Solarized Varje tema sätter startfärger för bakgrund, text och accent.
Textstil Titel, teckenstorlek, utfyllnad Teckenstorleken är begränsad till 10–40 px och utfyllnaden till 20–200 px.
Färger Bakgrund, text, accent Accentfärgen används för radnummer.
Fönsterhuvud Fönsterliknande huvud på eller av Titeln visas i huvudet när det är aktiverat.
Radnummer Visa eller dölj Numren ritas som vanlig canvastext.
Export PNG-nedladdning Nedladdningsknappen sparar aktuell canvas som PNG-bild.

Praktiska gränser

  • Webbläsaren ritar avsnittet som vanlig text med Canvas API. Den känner inte igen JavaScript, Python, HTML eller andra språk.
  • Förhandsvisningen använder de första 400 raderna så att mycket stora filer inte låser sidan.
  • Canvasbredden hålls mellan 420 px och 2200 px. Mycket långa rader kan nå maxbredden.
  • Tvåstegsversionen sparar dina inmatningar i sessionStorage för den aktuella webbläsarfliken medan du går från redigering till nedladdning.

Tillgänglighet

Kod i en bild går inte att söka i, kopiera eller läsa med skärmläsare. Använd PNG-filen som visuellt stöd och ha det riktiga kodavsnittet bredvid som markerbar text när du publicerar dokumentation, guider eller felrapporter.

Vanliga frågor

Nej. Det ritar exakt texten du klistrar in på en canvas. Du kan ändra färger och teman, men det finns ingen språkväljare eller syntaxparser.

Menyn innehåller Mörk, Ljus, Dracula och Solarized. Efter valet kan du fortfarande skriva över bakgrund, text och accentfärg.

Nej. Resultatet är en PNG-nedladdning skapad från canvasen. SVG, JPEG och kopiera som HTML finns inte.

Förhandsvisningen ritar de första 400 raderna för att webbläsaren ska fortsätta svara. För publicerade bilder är det oftast bättre att korta ner till de få rader som förklarar idén.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk