Markdown Spiekbriefje

Complete referentiegids voor Markdown-syntax

Gebaseerd op de GitHub Flavored Markdown (GFM) en CommonMark

Basissyntax

Fundamentele elementen van origineel Markdown

Koppen (ATX-stijl)

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

Koppen (Setext-stijl)

Syntax
Heading 1
=========

Heading 2
---------
Resultaat
Heading 1Heading 2

Nadruk en Opmaak

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

Inline Code

`code`→code
``code with `backtick` ``→code with `backtick`
Tip
Gebruik dubbele backticks als je code enkele backticks bevat.

Codeblokken (Fenced Code Blocks)

Syntax
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
Resultaat
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
Ondersteunde talen voor syntax highlighting
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Links

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Referentielink
[text][ref]

[ref]: https://example.com "Title"

Afbeeldingen

Syntax
![Alt text](url)
Met titel
![Alt text](url "Title")
Gekoppelde afbeelding
[![Alt](image.jpg)](link)
Referentie
![Alt][ref]

[ref]: url "Title"

Ongeordende Lijsten

Syntax
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
Resultaat
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

Geordende Lijsten

Syntax
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
Resultaat
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Citaten (Blockquotes)

Syntax
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
Resultaat
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

Horizontale Lijnen

Syntax
---

***

___
Resultaat

GFM Extensies

Extra functies van GitHub Flavored Markdown

Tabellen

Syntax
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

Uitlijning:
:--- links
:---: gecentreerd
---: rechts
Resultaat
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Takenlijsten

Syntax
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
Resultaat
  • Completed task
  • Another done task
  • Pending task
  • Another pending

Autolinks

URL's en e-mails worden automatisch gelinkt
www.example.com
https://example.com
[email protected]
Resultaat

Alerts/Callouts (GitHub)

Syntax
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
Resultaat
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

Uitgebreide Syntax

Geavanceerde functies ondersteund door sommige parsers

Voetnoten

Syntax
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
Resultaat

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

Definitielijsten

Syntax
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
Resultaat
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

Gemarkeerde Tekst

==highlighted text==→highlighted text
Opmerking
Ondersteund door sommige parsers zoals Obsidian, Notion en anderen.

Subscript en Superscript

H~2~O→H2O
X^2^→X2
HTML-alternatief
H<sub>2</sub>O
X<sup>2</sup>

Emoji's

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Volledige referentie
Volledige lijst met emoji-shortcodes

Afkortingen

Syntax
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
Resultaat
HTML is widely used on the web.

Wiskundige Formules (LaTeX)

Inline
The formula $E = mc^2$ is famous.
Resultaat
The formula E = mc² is famous.
Blok
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Resultaat
n!k!(n-k)! = (nk)

HTML en Speciale Elementen

Gebruik van inline HTML en speciale tekens

Inline HTML

Ondersteunde elementen
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
Resultaat
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

Teken Escaping

Gebruik \ voor speciale tekens
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Tekens die geëscaped kunnen worden
\ ` * _ { } [ ] ( ) # + - . ! |

Regeleindes

Methoden
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

HTML Entiteiten

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(vaste spatie)
&lt; &gt;→< >
&amp;→&

Geavanceerde GitHub Functies

GitHub Flavored Markdown-specifieke functies

Mermaid Diagrammen

Stroomdiagram
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Resultaat
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Cirkeldiagram
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Sequentiediagram
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Ondersteunde diagramtypes
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Toetsenbordtoetsen (kbd)

Syntax
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
Resultaat
Ctrl + C
Cmd + Shift + P
Enter ↵

Inklapbare Elementen

Syntax
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
Resultaat
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Vermeldingen en Referenties

Gebruikersvermeldingen
@username
@organization/team
Issue- en PR-referenties
#123
GH-123
username/repo#123
organization/repo#123
Resultaat
@username — vermeldt een gebruiker
#123 — verwijst naar issue/PR #123
repo#456 — verwijst in andere repo

Kleurmodellen

Syntax
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
Resultaat
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

Commentaar

Syntax
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Resultaat
(Commentaar is onzichtbaar in het gerenderde document)

Commit SHA

Syntax
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Resultaat
a1b2c3d — link naar de commit
repo@a1b2c3d — commit in andere repo

Code met Diff

Syntax
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
Resultaat
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

Ankers en Interne Links

Een anker maken
<a name="section"></a>
## My Section
Linken naar een anker
[Go to section](#section)
[Back to top](#top)
Resultaat
Go to section|Back to top ⬆️

Afbeeldingen met Grootte

HTML gebruiken
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
Tip
Gebruik HTML wanneer je afbeeldingsafmetingen of uitlijning moet controleren.

Inhoudsopgave

Syntax
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Resultaat
Table of Contents

Badges/Shields

Syntax
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
Resultaat
build: passingversion: 1.0.0license: MITdocs: latest

Tekstuitlijning

Syntax
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
Resultaat
Centered text
Right-aligned text
Centered bold

Tools en Bronnen

Nuttige links voor werken met Markdown

Referenties en Bronnen