Slik tar du et skjermbilde av kode til presentasjoner eller innlegg

Lim inn koden, velg språk og en macOS- eller Windows-ramme, og last ned et skarpt PNG-bilde til presentasjoner, dokumenter eller innlegg på sosiale medier.

3 min lesetid


Den nedlastede PNG-filen av en tolv linjer lang Python-funksjon for retry i et mørkt macOS-vindu med tittelen retry.py og tydelig avrundede hjørner
Den nedlastede PNG-filen av en tolv linjer lang Python-funksjon for retry i et mørkt macOS-vindu med tittelen retry.py og tydelig avrundede hjørner

For å ta et skjermbilde av kode åpner du kodegeneratoren for skjermbilder og limer inn koden i vinduet. Velg språk under «Språk» slik at fargene passer til koden. Skriv inn et navn i «Filnavn» for tittellinjen, og klikk deretter på «PNG». Bildet lages i nettleseren din.

Et skjermbilde av kodeeditoren viser også faner, menyer og liten tekst. Her får du bare vinduet med koden din, i tre ganger så stor størrelse som på skjermen. Teksten forblir skarp på en stor presentasjonsslide.

Slik lager du bildet

  1. Klikk i vinduet og lim inn koden. Du kan også skrive der. Enter beholder innrykket fra linjen over.
  2. Velg språk under «Språk». JavaScript er standardvalget.
  3. Velg en ramme under «Vindusstil»: macOS, Windows eller Ingen. macOS er standardvalget.
  4. Skriv inn et filnavn, for eksempel retry.py. Det vises i tittellinjen.
  5. Klikk på «PNG» under forhåndsvisningen.

Kodegeneratoren for skjermbilder med Python-funksjonen for retry i editoren, Python valgt som språk og retry.py skrevet inn som filnavnKodegeneratoren for skjermbilder med Python-funksjonen for retry i editoren, Python valgt som språk og retry.py skrevet inn som filnavn

Filen lagres med navnet snippet etterfulgt av et tall, for eksempel snippet-1792757286543.png. Klikk på «Sett inn eksempel» for å se et kort JavaScript-eksempel først.

Hvilke språk du kan velge

Listen «Språk» har 25 valg.

  • Web: JavaScript, TypeScript, HTML og CSS.
  • Programmering: Python, Java, Rust, C++, C, Go, PHP, SQL og Shell.
  • Data og konfigurasjon: JSON, JSON5, XML, YAML, CSV, INI, TOON, Nginx og Prisma Schema.
  • Tekst: Markdown, LaTeX og ren tekst.

Språket bestemmer bare fargene. Det hentes ikke fra koden eller filnavnet, så du må velge det selv.

Slik endrer du fargene

Kodefargene følger temaet på nettstedet. Hvis du vil ha et mørkt bilde, åpner du menyen øverst på siden, klikker på temaknappen og velger «Mørkt tema». Hvis du vil ha et hvitt bilde, velger du «Lyst tema».

Tittellinjen forblir mørk i begge temaene til du endrer «Farge på tittellinjen». Tittelen blir hvit eller svart, avhengig av hva som er lettest å lese. Når «Vindusstil» er satt til Ingen, vises ingen tittellinje, og fargefeltet er deaktivert.

Skrifttypen og margene er faste. Bildet har ikke linjenumre.

Slik angir du bredden

Vinduet er like bredt som den lengste linjen. Dra det lille prikkede håndtaket nederst til høyre for å gjøre vinduet smalere eller bredere. Lange linjer brytes da over på neste linje. Vinduet er minst 300 piksler bredt, og håndtaket vises ikke i bildet.

En svært lang linje kan gjøre at vinduet stikker utenfor forhåndsvisningen. Klikk på Tilbakestill-knappen i linjen over forhåndsvisningen for å tilpasse det igjen. Zoomknappene endrer bare forhåndsvisningen, ikke nedlastingen.

Hvilket format bør du velge

  • PNG lar området utenfor de avrundede hjørnene være gjennomsiktig, slik at bildet passer til en slide i hvilken som helst farge.
  • JPG fyller de små hjørnene med svart.
  • Skriv ut åpner bildet i et nytt vindu med utskriftsdialogen.

Begge formatene er tre ganger så store som vinduet på skjermen. Et vindu som er 752 piksler bredt, gir for eksempel et bilde som er 2256 piksler bredt.

Lim inn koden, velg språk, og last ned PNG-filen til presentasjonen.

Klar til å prøve selv?


Generator for kode-skjermbilder

Generer skjermbilde av kodeutdrag med syntaksutheving.

Åpne verktøyet

Del