Markdown-codeblokken - Cheatheet en voorbeelden van gebruik

Hier bespreek ik Codeblock opties in Markdown—hoe je de programmeertaal kunt specificeren, diff-formattering en de bestandsnaam van de codeblok. Deze gids is onderdeel van onze Documentatie Tools in 2026: Markdown, LaTeX, PDF & Printing Workflows hub.

Markdown codeblokken

Markdown codeblokken zijn een manier om code of vooraf opgemaakte tekst weer te geven binnen Markdown-documenten, terwijl de opmaak behouden blijft en optioneel syntaxisverlichting kan worden ingeschakeld. Er zijn twee hoofdtypes van codeopmaak in Markdown: inline code en codeblokken.

Typen Markdown codeblokken

Belangrijkste verschillen

• Inline code gebruikt enkele backticks (`) en is bedoeld voor korte code binnen een zin.
• Ingewikkelde codeblokken gebruiken vier spaties of een tab aan het begin van elke regel. Ze ondersteunen geen syntaxisverlichting en worden minder vaak gebruikt in moderne Markdown.
• Gekaderde codeblokken gebruiken drievoudige backticks (```) of tildes (~~~) voor en na de code. Dit is de voorkeursmethode, vooral op platforms zoals GitHub, omdat:
  • Ze makkelijker leesbaar en schrijfbaar zijn.
  • Je kunt direct na de opening backticks de programmeertaal opgeven voor syntaxisverlichting.
  • Ze behouden de opmaak en ondersteunen meervoudige regelcode.

Voorbeeld van een gekaderd codeblok met syntaxisverlichting:

Wanneer we de volgende opgemaakte Markdown tekst hebben:

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

Dan ziet de gegenereerde tekst er zo uit:

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

Best practices voor het gebruik van Markdown codeblokken

• Gebruik gekaderde codeblokken (drievoudige backticks) voor meervoudige regelcode om duidelijkheid en compatibiliteit over platforms te waarborgen.
• Specificeer de taal direct na de opening backticks voor syntaxisverlichting (bijv. ```python).
• Gebruik inline code voor korte fragmenten of opdrachten binnen tekst.
• Vermijd ingewikkelde codeblokken tenzij het vereist is voor compatibiliteit met oudere systemen, omdat ze geen syntaxisverlichting ondersteunen en minder leesbaar zijn.
• Plaats een lege regel voor en na gekaderde codeblokken om de leesbaarheid in ruwe Markdown te verbeteren.

Speciale functies

• Sommige platforms ondersteunen extra taalidentificatoren zoals diff om codeveranderingen weer te geven, wat toegevoegde of verwijderde regels in codebeoordelingen kan benadrukken.
• Om backticks binnen een codeblok weer te geven, omhul het blok met meer backticks (bijv. vier backticks om drie backticks weer te geven).

Uitkomst

Gebruik gekaderde codeblokken met een taalidentificatie voor de beste leesbaarheid en syntaxisverlichting. Reserveer inline code voor korte fragmenten en vermijd ingewikkelde blokken tenzij het vereist is voor compatibiliteit.

Diff syntaxisverlichting

Om diff syntaxisverlichting effectief in Markdown codeblokken te gebruiken, volg je deze stappen:

• Gebruik gekaderde codeblokken met drievoudige backticks (```) om je blok te beginnen en te eindigen.
• Specificeer diff als taalidentificatie direct na de opening backticks. Dit activeert syntaxisverlichting voor verschillen, zoals je ziet in Git commitberichten of pull requests.

Voorbeeld:

- oude regel die verwijderd wordt
+ nieuwe regel die toegevoegd wordt
 onveranderde regel

• Regels die beginnen met - worden benadrukt als verwijderingen (meestal rood).
• Regels die beginnen met + worden benadrukt als toevoegingen (meestal groen).
• Regels zonder voorvoegsel worden niet speciaal benadrukt.

Best practices:

• Gebruik dit formaat om codeveranderingen, correcties of suggesties duidelijk te communiceren in documentatie, codebeoordelingen of technische blogs.
• Plaats een lege regel voor en na je codeblok voor betere leesbaarheid in ruwe Markdown.
• Merk op dat diff-verlichting kleurt hele regels op basis van het leidende karakter; het verlicht geen inlineveranderingen binnen een regel.

Tip:
Deze methode wordt breed ondersteund op platforms zoals GitHub, GitLab en veel Markdown-vertalers, waardoor het een betrouwbare keuze is voor het visueel delen van codeveranderingen.

Ondersteunde talen

Markdown codeblokken ondersteunen een brede verscheidenheid aan talen voor syntaxisverlichting, maar de exacte set van ondersteunde talen hangt af van de renderer of het platform dat je gebruikt. Markdown zelf definieert niet welke talen ondersteund zijn; het geeft alleen de taalidentificatie door aan de rendering-engine, die dan de juiste syntaxisverlichting toepast. Markdown code-fences zelf definiëren geen vaste lijst met officieel ondersteunde programmeertalen. In plaats daarvan hangt de lijst met ondersteunde talen af van de Markdown renderer of het platform dat je gebruikt (zoals GitHub, GitLab, VS Code, Typora, Quarto, enz.).

Vaak ondersteunde talen op grote platforms (zoals GitHub, VS Code, Bitbucket, Docusaurus en ReadMe) zijn:

• Web & Scripting: javascript (js), typescript (ts), html, css, json, xml, yaml, shell/bash (sh, bash, shell, zsh)
• Programmeren: python (py), java, c, c++, c#, php, ruby, go, rust, scala, swift, kotlin, objective-c
• Data & Query: sql, r, matlab
• Markup & Config: markdown, ini, toml, dockerfile, makefile
• Speciaal: diff, mermaid, geojson, topojson, stl (voor diagrammen en datavisualisaties op GitHub)
• Andere: jsx, tsx, perl, lua, julia, dart, groovy, powershell, vb, elixir, erlang, fortran, haskell, lisp, scheme, en veel meer

Hoe een taal op te geven: Gebruik de taalnaam direct na de opening drievoudige backticks:

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

De volgende talen worden breed ondersteund over MEESTE Markdown renderers:

Opmerking: De werkelijke identificatie kan variëren (bijv. js vs. javascript). De meeste renderers zijn niet gevoelig voor hoofdletters in taalnamen.

Hoe de volledige lijst van ondersteunde talen te vinden:

• GitHub: Gebruikt Linguist voor verlichting, met ondersteuning voor honderden talen.
• VS Code & veel webrenderers: Gebruiken highlight.js of Pygments—zie hun documentatie voor uitgebreide lijsten.
• Bitbucket: Verwijst naar CodeMirror modes en Pygments lexers.

Belangrijke punten:

• De meeste platforms ondersteunen alle belangrijke programmeertalen, scripttalen en markup-talen.
• Sommige platforms ondersteunen ook diagrammen en dataformaten (zoals mermaid, geojson).
• De taalidentificatie is meestal niet gevoelig voor hoofdletters, maar moet in kleine letters zijn voor de beste compatibiliteit.
• Als je een niet-ondersteunde taalidentificatie gebruikt, wordt het codeblok weergegeven als platte tekst.

Bestandsnaam opgeven in een Markdown codeblok

Om een bestandsnaam in een Markdown codeblok op te geven, heb je verschillende opties, maar de methode hangt af van het platform en de renderer:

1. Bestandsnaam in de Codeblok Label (Meta Syntax)

Sommige Markdown-engines (zoals bepaalde statische sitegenerators, documentatiemiddelen en blogplatforms) ondersteunen een meta-syntaxis waarbij je de bestandsnaam toevoegt na de taal, gescheiden door een kolon:

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

Dit toont de bestandsnaam (bijv. app.js) boven of naast het codeblok, afhankelijk van de renderer. En deze website’ hugo renderer doet dat niet:

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

Opmerking: Dit wordt niet ondersteund op alle platforms (bijv. GitHub-flavored Markdown ondersteunt dit momenteel niet).

2. Manuele bestandsnaam kop of inline code

Voor universele compatibiliteit (inclusief GitHub, Stack Overflow en meeste Markdown renderers), plaats je de bestandsnaam boven het codeblok, met behulp van een kop of vet inline code:

**`app.js`**

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

Of:

#### `app.js`

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

Dit associeert visueel de bestandsnaam met het codeblok en werkt overal.

3. Bestandsnaam als commentaar in de code

Alternatief kun je de bestandsnaam als commentaar binnen het codeblok zelf opnemen:

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

Dit is vooral handig als je de bestandsnaam zichtbaar wilt hebben bij het kopiëren van de code.

Samenvatting en beste praktijken

Gebruik een kop of vet inline code boven het codeblok voor maximale compatibiliteit, en overweeg een commentaar binnen de code voor duidelijkheid bij het delen over verschillende platforms.

Nuttige links

• Documentatie Tools in 2026: Markdown, LaTeX, PDF & Printing Workflows
• Markdown Cheatsheet - Meest nuttige structuren en opdrachten
• Hugo Cheat Sheet
• https://www.markdownguide.org/extended-syntax/
• https://docs.readme.com/rdmd/docs/code-blocks