Markdown-kodblock – CheatSheet och exempel på hur man använder dem

Här gör jag en översikt av alternativ för kodblock i Markdown – hur man anger programmeringsspråk, diff-formatering och filnamn för kodblock. Den här guiden är en del av vår Dokumentationsverktyg 2026: Markdown, LaTeX, PDF & Skrivningsflöden hub.

Markdown kodblock

Markdown kodblock är ett sätt att visa kod eller förformaterad text inom Markdown-dokument, med bevarad formatering och eventuell syntaxmarkering. Det finns två huvudsakliga typer av kodformatering i Markdown: inline-kod och kodblock.

Typer av Markdown-kodblock

Viktiga skillnader

• Inline-kod använder enkla backticks (`) och är för korta kodutdrag inom en mening.
• Indenterade kodblock använder fyra mellanslag eller en tab vid början av varje rad. De stöder inte syntaxmarkering och är mindre vanliga i modern Markdown.
• Fästblock använder trippel backticks (```) eller tildor (~~~) före och efter koden. Detta är den föredragna metoden, särskilt på plattformar som GitHub, eftersom:
  • De är enklare att läsa och skriva.
  • Du kan ange programmeringsspråket direkt efter de öppnande backticks för syntaxmarkering.
  • De bevarar formatering och stöder flerradig kod.

Exempel på ett fästblock med syntaxmarkering:

När vi har följande markdown-formaterad text:

```python
def hello():
    print("Hello, world!")
```

Så kommer den renderade texten att se ut så här:

def hello():
    print("Hello, world!")

Bra praxis för att använda Markdown-kodblock

• Använd fästblock (trippel backticks) för flerradig kod för att säkerställa tydlighet och kompatibilitet över olika plattformar.
• Ange språket efter de öppnande backticks för syntaxmarkering (t.ex. ```python).
• Använd inline-kod för korta utdrag eller kommandon inom text.
• Undvik indenterade kodblock om det inte krävs för kompatibilitet, eftersom de inte stöder syntaxmarkering och kan vara svårare att läsa.
• Placera en tom rad före och efter fästblock för att förbättra läsbarheten i rå Markdown.

Specialfunktioner

• Vissa plattformar stöder ytterligare språkidentifierare som diff för att visa kodändringar, vilket kan markera tillagda eller borttagna rader i kodrecensioner.
• För att visa backticks inom ett kodblock, omgiv blocket med fler backticks (t.ex. fyra backticks för att visa tre backticks).

OutTake

Använd fästblock med en språkidentifierare för bästa läsbarhet och syntaxmarkering. Reservera inline-kod för korta utdrag, och undvik indenterade block om det inte krävs för kompatibilitet.

Diff-syntaxmarkering

För att effektivt använda diff-syntaxmarkering i Markdown-kodblock, följ dessa steg:

• Använd fästblock med trippel backticks (```) för att börja och sluta ditt block.
• Ange diff som språkidentifierare direkt efter de öppnande backticks. Detta aktiverar syntaxmarkering för skillnader, liknande det du ser i Git-kommithistorik eller pull requests.

Exempel:

- gammal rad som kommer att tas bort
+ ny rad som kommer att läggas till
 oförändrad rad

• Rader som börjar med - kommer att markeras som borttagningar (vanligtvis röda).
• Rader som börjar med + kommer att markeras som tillägg (vanligtvis gröna).
• Rader utan prefix kommer inte att markeras särskilt.

Bra praxis:

• Använd detta format för att tydligt kommunicera kodändringar, reparationer eller förslag i dokumentation, kodrecensioner eller tekniska bloggar.
• Placera en tom rad före och efter ditt kodblock för bättre läsbarhet i rå Markdown.
• Notera att diff-markeringen färglägger hela rader baserat på det ledande tecknet; den markera inte inre ändringar inom en rad.

Tips:
Den här metoden stöds vidare på plattformar som GitHub, GitLab och många Markdown-renderare, vilket gör den till ett tillförlitligt val för att dela visuella kodändringar.

Stödda språk

Markdown-kodblock stöder ett brett utbud av språk för syntaxmarkering, men den exakta mängden stödda språk beror på den renderare eller plattform du använder. Markdown självt definierar inte vilka språk som stöds; det skickar bara språkidentifieraren till renderingsmotorn, som sedan tillämpar lämplig syntaxmarkering. Markdown-fästblock själva definierar inte en fast sats av offentligt stödda programmeringsspråk. Istället beror listan över stödda språk på Markdown-renderaren eller plattform du använder (t.ex. GitHub, GitLab, VS Code, Typora, Quarto, etc.).

Vanligtvis stödda språk på stora plattformar (t.ex. GitHub, VS Code, Bitbucket, Docusaurus, och ReadMe) inkluderar:

• Webb & Skript: javascript (js), typescript (ts), html, css, json, xml, yaml, shell/bash (sh, bash, shell, zsh)
• Programmering: python (py), java, c, c++, c#, php, ruby, go, rust, scala, swift, kotlin, objective-c
• Data & Fråga: sql, r, matlab
• Markering & Konfiguration: markdown, ini, toml, dockerfile, makefile
• Special: diff, mermaid, geojson, topojson, stl (för diagram och datavisualiseringar på GitHub)
• Övrigt: jsx, tsx, perl, lua, julia, dart, groovy, powershell, vb, elixir, erlang, fortran, haskell, lisp, scheme, och många fler

Hur man anger ett språk: Använd språknamnet direkt efter de öppnande trippel backticks:

```python
def hello():
    print("Hello, world!")
```

Följande språk stöds vidare på MÅNGA Markdown-renderare:

Notera: Den faktiska identifieraren kan variera (t.ex. js vs. javascript). De flesta renderare är oberoende av storlek på språknamn.

Hur man hittar den fullständiga listan över stödda språk:

• GitHub: Använder Linguist för markering, stöder hundratals språk.
• VS Code & många webbrenderare: Använder highlight.js eller Pygments – se deras dokumentation för omfattande listor.
• Bitbucket: Hänvisar till CodeMirror-moder och Pygments lexikala.

Viktiga punkter:

• De flesta plattformar stöder alla stora programmeringsspråk, skript och markeringsspråk.
• Vissa plattformar stöder även diagram och datavillkor (t.ex. mermaid, geojson).
• Språkidentifieraren är vanligtvis oberoende av storlek men bör vara i små bokstäver för bästa kompatibilitet.
• Om du använder en oönskad språkidentifierare, kommer kodblocket att renderas som vanlig text.

Ange filnamn i Markdown-kodblock

För att ange ett filnamn i ett Markdown-kodblock, har du flera alternativ, men metoden beror på plattformen och renderaren:

1. Filnamn i kodblockets etikett (metasyntax)

Vissa Markdown-motorer (t.ex. vissa statiska webbplatsgeneratorer, dokumentationsverktyg och bloggplattformar) stöder en metasyntax där du lägger till filnamnet efter språket, separerat av kolon:

```js:app.js
console.log("Hello, world!");
```

Detta kommer att visa filnamnet (t.ex. app.js) ovanför eller bredvid kodblocket, beroende på renderaren. Och den här webbplatsens hugo-renderare gör inte det:

console.log("Hello, world!");

Notera: Detta stöds inte på alla plattformar (t.ex. GitHub-flavoured Markdown stöder inte detta funktion just nu).

2. Manuell filnamnsrubrik eller inline-kod

För universell kompatibilitet (inklusive GitHub, Stack Overflow och de flesta Markdown-renderare), placera filnamnet ovanför kodblocket, med en rubrik eller fet inline-kod:

**`app.js`**

```
console.log("Hello, world!");
```

Eller:

#### `app.js`

```
console.log("Hello, world!");
```

Detta visuellt kopplar filnamnet till kodblocket och fungerar överallt.

3. Filnamn som kommentar i koden

Alternativt kan du inkludera filnamnet som en kommentar inuti kodblocket självt:

```
// app.js
console.log("Hello, world!");
```

Detta är särskilt användbart om du vill att filnamnet ska vara synligt när koden kopieras.

Sammanfattning och bästa praxis

Använd en rubrik eller fet inline-kod ovanför kodblocket för maximal kompatibilitet, och överväg att lägga till en kommentar i koden för tydlighet när du delar över olika plattformar.

Några användbara länkar

• Dokumentationsverktyg 2026: Markdown, LaTeX, PDF & Skrivningsflöden
• Markdown Cheat Sheet - De mest användbara strukturerna och kommandona
• Hugo Cheat Sheet
• https://www.markdownguide.org/extended-syntax/
• https://docs.readme.com/rdmd/docs/code-blocks