Markdown Spickzettel

Vollständige Referenzanleitung für Markdown-Syntax

Basierend auf der GitHub Flavored Markdown (GFM) und CommonMark

Grundsyntax

Grundelemente des ursprünglichen Markdown

Überschriften (ATX-Stil)

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

Überschriften (Setext-Stil)

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

Heading 2
---------
Ergebnis
Heading 1Heading 2

Betonung und Formatierung

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

Inline-Code

`code`→code
``code with `backtick` ``→code with `backtick`
Tipp
Verwenden Sie doppelte Backticks, wenn Ihr Code einfache Backticks enthält.

Codeblöcke (Fenced Code Blocks)

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

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

greet("World");
Unterstützte Sprachen für Syntaxhervorhebung
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Links

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

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

Bilder

Syntax
![Alt text](url)
Mit Titel
![Alt text](url "Title")
Verlinktes Bild
[![Alt](image.jpg)](link)
Referenz
![Alt][ref]

[ref]: url "Title"

Ungeordnete Listen

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

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

Geordnete Listen

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
Ergebnis
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Blockzitate

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

Horizontale Linien

Syntax
---

***

___
Ergebnis

GFM-Erweiterungen

Zusätzliche Funktionen von GitHub Flavored Markdown

Tabellen

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

Ausrichtung:
:--- links
:---: zentriert
---: rechts
Ergebnis
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Aufgabenlisten

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

Autolinks

URLs und E-Mails werden automatisch verlinkt
www.example.com
https://example.com
[email protected]
Ergebnis

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.
Ergebnis
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.

Erweiterte Syntax

Fortgeschrittene Funktionen, die von einigen Parsern unterstützt werden

Fußnoten

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.
Ergebnis

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.

Definitionslisten

Syntax
Term 1
: Definition of term 1

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

Hervorgehobener Text

==highlighted text==→highlighted text
Hinweis
Unterstützt von einigen Parsern wie Obsidian, Notion und anderen.

Tiefgestellt und Hochgestellt

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

Emojis

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Vollständige Referenz
Vollständige Liste der Emoji-Shortcodes

Abkürzungen

Syntax
HTML is widely used on the web.

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

Mathematische Formeln (LaTeX)

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

HTML und Sonderelemente

Verwendung von Inline-HTML und Sonderzeichen

Inline-HTML

Unterstützte Elemente
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

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

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

Zeichen-Escaping

Verwenden Sie \ vor Sonderzeichen
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Zeichen, die escaped werden können
\ ` * _ { } [ ] ( ) # + - . ! |

Zeilenumbrüche

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-Entitäten

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(geschütztes Leerzeichen)
&lt; &gt;→< >
&amp;→&

Erweiterte GitHub-Funktionen

GitHub Flavored Markdown-spezifische Funktionen

Mermaid-Diagramme

Flussdiagramm
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Ergebnis
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Kreisdiagramm
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Sequenzdiagramm
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Unterstützte Diagrammtypen
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Tastaturtasten (kbd)

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

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

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

Einklappbare Elemente

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

  Hidden content that will
  be revealed on click.

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

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Erwähnungen und Referenzen

Benutzererwähnungen
@username
@organization/team
Issue- und PR-Referenzen
#123
GH-123
username/repo#123
organization/repo#123
Ergebnis
@username — erwähnt einen Benutzer
#123 — referenziert Issue/PR #123
repo#456 — referenziert in anderem Repo

Farbmodelle

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

Kommentare

Syntax
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Ergebnis
(Kommentare sind im gerenderten Dokument unsichtbar)

Commit SHA

Syntax
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Ergebnis
a1b2c3d — Link zum Commit
repo@a1b2c3d — Commit in anderem Repo

Code mit Diff

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

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

Anker und interne Links

Einen Anker erstellen
<a name="section"></a>
## My Section
Zu einem Anker verlinken
[Go to section](#section)
[Back to top](#top)
Ergebnis
Go to section|Back to top ⬆️

Bilder mit Größenangabe

HTML verwenden
<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>
Tipp
Verwenden Sie HTML, wenn Sie Bildabmessungen oder -ausrichtung steuern müssen.

Inhaltsverzeichnis

Syntax
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Ergebnis
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)
Ergebnis
build: passingversion: 1.0.0license: MITdocs: latest

Textausrichtung

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

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

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

Tools und Ressourcen

Nützliche Links für die Arbeit mit Markdown

Referenzen und Ressourcen