Sådan vises kodeblokke i Medium

Og hvordan man skriver inline-kode og integrerer kode til syntaksfremhævning

Medium gør det let at tilføje kodeblokke og inline

Medium har en skjult genvej, der gør tekst til almindelig tekst ...

hvis (udvikler === sand) {

følg (this.mediumPublication);

}

... i en formateret kodeblok:

if (developer === true) {
 follow(this.mediumPublication);
}

For at opnå dette skal du markere teksten og derefter trykke på:

  • Windows : Control + Alt + 6
  • Mac : Kommando + Option + 6
  • Linux : Control + Alt + 6

Opdatering 19. oktober 2016: Medium understøtter nu også den fælles konvention om at starte en kodeblok med tredobbelte back-flåter. Hvis du skriver '' på en ny linje, skifter Medium nu til kodeindgangstilstand. En stor tak til Luke Esterkyn og resten af ​​Medium-teamet for at implementere dette!

Du kan også fremhæve kode indbygget ved at vælge den og derefter klikke på backtick-tasten (`). For eksempel kan du formatere tekst som kode freeCodeCamp()lige midt i en sætning.

Du kan også integrere GitHub-gister ved at indsætte deres URL i en tom linje og derefter trykke på enter:

Sådan integreres webapps

Som en bonus kan du integrere kørbare apps lige i Medium. Bare hvis disse ikke gengives ordentligt i Medium's mobilapps, anbefaler jeg at inkludere links under hver af indlejringerne som en reserve.

Indsæt en CodePen.io URL i Medium, og tryk derefter på enter:

Se min CodePen her.

Du kan også gøre dette med JSFiddle.net:

Se min JSFiddle her.

Men brug ikke billeder af kode.

Selvom det kan synes praktisk at tage skærmbilleder af din kode og indsætte dem i Medium, skal du ikke gøre dette.

Medium har endnu ikke en alt-tekst-mulighed, så dette vil gøre din kode fuldstændig utilgængelig for udviklere, der er synshandicappede. Og ja, de er derude.

Du kan heller ikke ændre skriftstørrelsen på statiske billeder, hvilket gør det svært at læse på en mobiltelefon (det er her, de fleste mennesker læser Medium).

Endelig gør det det umuligt for læsere at kopiere og indsætte din kode.

Jeg ved, jeg ved - du skal ikke kopiere og indsætte kode alligevel.

Men lad os indse det - folk gør det. Og de fleste mennesker vil hurtigt opgive din tutorial, hvis de står over for udsigten til manuelt at indtaste en masse kode.

Så for at opsummere:

  • Brug Mediums native kodeblokke
  • eller integrer GitHub-gists
  • Brug eksempler på arbejde fra CodePen og JSFiddle, hvor det er muligt
  • men indsæt ikke billeder af kode

Glad kodning og skrivning om kodning!

Jeg skriver kun om programmering og teknologi. Hvis du følger mig på Twitter, spilder jeg ikke din tid. ?