Markdown kodblock: Så skriver du kod i texten

Markdown kodblock: Så skriver du kod i texten

Ett kodblock i Markdown är ett stycke text som visas som kod, inte som vanlig brödtext. Det används när du vill visa ett kommandorads-exempel, ett kodstycke eller en konfiguration utan att Markdown-tolken försöker formatera texten som rubriker, listor eller länkar. I den här guiden går vi igenom hur du skapar fristående kodblock, inline-kod och vad du ska tänka på när du publicerar.

Vad är ett kodblock i Markdown

Ett kodblock markerar text som ska tolkas bokstavligt. Allt som står inuti blocket visas precis som det är skrivet, med radbrytningar och mellanrum intakta. Det är användbart när du publicerar en sida och vill visa exempel på kod, terminalkommandon eller struktur som inte ska renderas som formaterad text.

Markdown har två huvud sätt att markera kod: det fristående kodblocket, som tar upp en eller flera rader, och inline-koden, som ligger löpande i en mening.

Fristående kodblock med backticks

Det vanligaste sättet att skapa ett fristående kodblock är att använda tre backticks på en egen rad före och efter koden:

Hej världen
Det här är ett kodblock

Allt mellan de två raderna med tre backticks tolkas som kod. Radbrytningar, mellanrum och specialtecken bevaras. Du kan också använda tre tilde-tecken (~) istället för backticks, om du föredrar det.

Lägg till språk för syntaxmarkering

Efter de första tre backticksen kan du skriva vilket programmeringsspråk koden är skriven på. Många Markdown-tolkar använder det för att färglägga koden, så kallad syntaxmarkering:

def hallo():
    print("Hej, världen!")

Här markerar ordet python direkt efter backticksen språket. Du kan ange javascript, html, css, bash, json, yaml eller det språk som stämmer för din kod. Språkmarkeringen är valfri — koden fungerar även utan den.

Inline-kod i löpande text

Ibland vill du markera en kort kodfragment mitt i en mening, utan att bryta raden. Då använder du en backtick före och efter texten:

Använd kommandot ls -la för att lista filer i mappen.

Texten mellan de två backticksen visas som kod, men meningen fortsätter på samma rad. Det är smidigt för variabelnamn, funktioner, filnamn och kommandon som du nämner i brödtexten.

Indenterade kodblock

Äldre varianter av Markdown stöder också kodblock genom att indentera varje rad med minst fyra mellanslag:

Det här är ett kodblock
som är indragen med fyra mellanslag

Den här metoden fungerar fortfarande i många tolkare, men de fristående kodblocken med tre backticks är tydligare och lättare att läsa. Vi rekommenderar backticks framför indrag.

Vanliga misstag att undvika

Ett vanligt misstag är att glömma den avslutande raden med tre backticks. Då kan resten av sidan tolkas som kod och inte visas som du tänkt dig. Kontrollera alltid att varje kodblock har både en start- och en slutrad.

Ett annat misstag är att använda vanliga citattecken (" ") istället för backticks (`). Citattecken skapar inget kodblock i Markdown.

Om koden innehåller tre backticks kan det avsluta blocket i förtid. Då kan du använda fyra backticks runt hela blocket istället, eller byta till tildes.

Publicera kod på webben

När du publicerar en sida med kodblock är det viktigt att koden ser lika ut för alla som besöker sidan. Testa att sidan renderar kodblocken rätt i olika webbläsare och på mobilen. Om du använder syntaxmarkering, se till att färgläggningen inte gör koden svårare att läsa för den som har nedsatt syn.

Håll kodblocken korta och relevanta. Ett långt kodblock i mitten av en artikel kan få läsaren att tappa tråden. Dela hellre upp koden i mindre stycken och förklara vad varje del gör.

Snabb sammanfattning

• Använd tre backticks före och efter ett fristående kodblock.
• Lägg till språknamn direkt efter de första backticksen för syntaxmarkering.
• Använd en backtick på var sida för inline-kod i löpande text.
• Glöm inte den avslutande backtick-raden.
• Testa att kodblocken visas rätt när du publicerar sidan.

Med kodblock får dina kodstycken att visas exakt som de är menade, oavsett var på webben sidan publiceras.