Markdown-kodblock: Komplett guide med syntax, språk och exempel

Här granskar jag alternativ för kodblock i Markdown – hur du 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.

Översikt över Markdown-kodblock

Markdown-kodblock visar kod eller förformaterat text i Markdown-dokument, medan formateringen bevaras och syntaxmarkering kan aktiveras. 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 kodsnuttar 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 ovanliga i modern Markdown.
• Fästblock använder trippelbackticks (```) 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 öppnande backticks för syntaxmarkering.
  • De bevarar formatering och stöder flerradig kod.

Exempel på fästblock med syntaxmarkering:

När vi har följande Markdown-formaterade text:

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

Den renderade utgången ser ut så här:

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

Bästa praxis för Markdown-kodblock

• Använd fästblock (tripelbackticks) för flerradig kod för att säkerställa tydlighet och kompatibilitet över olika plattformar.
• Ange språket efter öppnande backticks för syntaxmarkering (t.ex. ```python).
• Använd inline kod för korta snuttar 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.

Särskilda funktioner

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

Snabbreferensöversikt

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

Kodblock passar naturligt med tabeller i Markdown för att bygga välstrukturerad teknisk dokumentation.

Diff-syntaxmarkering

Diff-syntaxmarkering låter dig visa kodändringar tydligt – användbart i dokumentation, kodgranskningar och tekniska bloggar.

• Använd fästblock med trippelbackticks (```) för att börja och sluta ditt block.
• Ange diff som språkidentifierare direkt efter öppnande backticks.

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 - markeras som borttagningar (ofta röda).
• Rader som börjar med + markeras som tillägg (ofta gröna).
• Rader utan prefix markeras inte särskilt.

Bästa praxis:

• Placera en tom rad före och efter ditt kodblock för bättre läsbarhet i rå Markdown.
• Observera att diff-markering bara färgar hela rader baserat på den ledande karaktären; den markeringar inte inbyggda ändringar inom en rad.

Tips: Diff-markering stöds bredt på GitHub, GitLab och de flesta Markdown-renderare, vilket gör det till ett tillförlitligt val för att kommunicera kodändringar.

Språk som stöds för syntaxmarkering

Den exakta uppsättningen språk som stöds beror på den renderare eller plattform du använder. Markdown skickar språkidentifieraren till renderingen, som tillämpar lämplig syntaxmarkering. Detta spelar en roll när du konverterar HTML till Markdown med Python, eftersom <code>-taggar som innehåller språkklassattribut (t.ex. class="language-python") mappas direkt till dessa identifierare i fästblocket.

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

• Webb & Skript: javascript (js), typescript (ts), html, css, json, xml, yaml, shell/bash (sh, bash, shell, zsh)
• Programmering: python (py), java, c, cpp (c++), csharp (c#), php, ruby, go, rust, scala, swift, kotlin, objective-c
• Data & Fråga: sql, r, matlab
• Markup & Konfig: markdown, ini, toml, dockerfile, makefile
• Särskilt: diff, mermaid, geojson, topojson, stl (för diagram och datavisualiseringar på GitHub)
• Andra: 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:

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

Språkidentifierare som stöds av de flesta renderare:

Observera: De flesta renderare är oberoende av storlek på språknamn. Om du använder en oönskad identifierare, visas kodblocket som ren text.

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

• GitHub: Använder Linguist, som 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.

Ange ett filnamn i ett Markdown-kodblock

Att visa filnamnet bredvid ett kodblock hjälper läsare att identifiera vilken fil en snutt tillhör. Stöd varierar beroende på plattform.

1. Filnamn i kodblockets etikett (metasyntax)

Vissa Markdown-motorer (vissa statiska webbsajtgenererare och dokumentationsplattformar) stöder en metasyntax där du bifogar filnamnet efter språket, separerat av en kolon:

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

Detta visar filnamnet ovanför eller bredvid kodblocket. Den här sidans Hugo-renderare stöder inte det:

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

Observera: Detta stöds inte på GitHub-flavrade Markdown.

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 fet inline kod:

**`app.js`**

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

Eller med en rubrik:

#### `app.js`

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

Detta fungerar överallt och visuellt kopplar filnamnet till kodblocket.

3. Filnamn som kommentar inuti koden

Inkludera filnamnet som en kommentar inuti kodblocket självt:

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

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

Kompatibilitetsöversikt

Använd fet inline kod ovanför kodblocket för bästa kompatibilitet, och överväg en kommentar inuti koden för tydlighet när du delar över flera plattformar.

Escaping Backticks Inside Code Blocks

För att visa backtick-fästen inuti ett kodblock – till exempel när du skriver dokumentation om Markdown självt – skapa ett block med fler backticks:

````markdown
```python
# Detta trippel-backtick-fäste är inuti ett fyra-backtick-fäste
print("hello")
```
````

Att använda fyra backticks som yttre fäste låter dig visa trippel-backtick-exempel inuti, vilket är användbart för Markdown-tutorier och snabbguide.

Hugo-specifikt: Highlight-kortkod

Om du använder Hugo, erbjuder den inbyggda highlight kortkoden mer kontroll än enkla fästblock, inklusive radnummer och markering av specifika rader:

{{< highlight python "linenos=true,hl_lines=2 4" >}}
def greet(name):
    print(f"Hello, {name}!")

greet("world")
{{< /highlight >}}

Alternativ:

• linenos=true – visa radnummer
• hl_lines=2 4 – markera rad 2 och 4
• linenostart=10 – börja radnummer vid 10

Detta är särskilt användbart i tutorier eller dokumentation där du vill dra uppmärksamheten till specifika rader. Se Markdown-snabbguide för fler formateringsfunktioner, och Hugo-snabbguide för en bredare referens på Hugo-kommandon och mallar.

Några användbara länkar

• https://www.markdownguide.org/extended-syntax/
• https://docs.readme.com/rdmd/docs/code-blocks