Markdown-Formatierungen, die hier verwendet werden:

Diese Auflistung habe ich zum Markdown lernen und üben gemacht. Sie hat nicht den Anspruch vollständig zu sein und zeigt sicher auch nicht alle Tipps und Tricks und Varianten die Markdown zu bieten hat:

![Markdown-Logo](./images/Markdown-mark.svg)

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header
###### H6 Header

Zeilen werden nicht getrennt. Um einen Zeilenwechsel zu formatieren 2 Leerzeichen ans Ende der Zeile setzen:

Normal
Kursiv,
Fett, und
Monospace.

Normal 
*Kursiv*, 
**Fett**, und 
`Monospace`.

(bei Monospace sind Backticks ` kann man im Codebeispiel kaum erkennen)

Eine Auflistung - mit Bulletpoints

• Dieses
• ist eine
• Liste

Eine Auflistung - mit Bulletpoints
* Dieses
* ist eine
* Liste

Zitate macht man so: Sie können auch gerne über mehrere Absätze gehen.

Zum Beispiel bis hier hin.

> Zitate macht man so:  
> Sie können auch gerne über mehrere Absätze gehen.
> 
> Zum Beispiel bis hier hin.

Zitat für Faule: Nur in der ersten Zeile das Größer-Zeichen am Zeilenanfang eintippen. Auch in diesem Fall werden die Zeilen automatisch umgebrochen und das eingetippte Zeilenende ignoriert!

> Zitat für Faule: Nur in der ersten Zeile das Größer-Zeichen
am Zeilenanfang eintippen. 
Auch in diesem Fall werden die Zeilen automatisch
umgebrochen und das eingetippte Zeilenende ignoriert!

Hier eine Aufzählung - Zeilen werden automatisch durchnumeriert:

1. Erster Eintrag
2. Zweiter Eintrag
3. Dritter Eintrag

Hier eine Aufzählung - Zeilen werden automatisch durchnumeriert:

 1. Erster Eintrag
 1. Zweiter Eintrag
 1. Dritter Eintrag

Projekte / Aufgabenliste:

• Projekt

  • Erste Teil-Aufgabe
  • Zweite Teil-Aufgabe
  • Dritte Teil-Aufgabe

- [ ] Projekt
  - [x]	Erste Teil-Aufgabe
  - [ ]	Zweite Teil-Aufgabe
  - [ ]	Dritte Teil-Aufgabe

Tabellen:

Status	Beschreibung	Notizen
Offen	Markdown vervollständigen	Zunächst alle Varianten ermitteln
Abgeschlossen	Tabellenbeispiele einbauen	Links, zentriert und rechts ausgerichtet beachten!

| Status         | Beschreibung                | Notizen                                            |
| :---           |    :----:                   |          ---:                                      |
| Offen          | Markdown vervollständigen   | Zunächst alle Varianten ermitteln                  |
| Abgeschlossen  | Tabellenbeispiele einbauen  | Links, zentriert und rechts ausgerichtet beachten! |

Die Linien (Pipe-Symbole) brauchen nicht so sauber, wie in diesem Beispiel ausgerichtet sein, solange die Anzahl und Textaufteilung stimmt ist die Position völlig egal.

Codebeispiele

Ein mit vier Leerzeichen eingerückter Text wird zu code:

$ ls -al

    $ ls -al

Codebeispiele werden durch drei ``` (Backticks) gefolgt von der Sprache für die Farbformatierung, z.B. bash, javascript, go, json ...

{
  "name": "demo",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@gridsome/plugin-sitemap": "^0.3.0",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.6.0",
    "@gridsome/vue-remark": "^0.2.1",
    "axios": "^0.19.2",
    "gridsome": "^0.7.17",
    "gridsome-plugin-remark-shiki": "^0.3.1",
    "gridsome-plugin-rss": "^1.2.0",
    "vue-fuse": "^2.2.1",
    "vue-scrollto": "^2.18.1"
  },
  "devDependencies": {
    "gridsome-plugin-tailwindcss": "^2.2.48"
  }
}

```json
{ "name": "demo", "private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"@gridsome/plugin-sitemap": "^0.3.0",
"@gridsome/source-filesystem": "^0.6.2",
"@gridsome/transformer-remark": "^0.6.0",
"@gridsome/vue-remark": "^0.2.1",
"axios": "^0.19.2",
"gridsome": "^0.7.17",
"gridsome-plugin-remark-shiki": "^0.3.1",
"gridsome-plugin-rss": "^1.2.0",
"vue-fuse": "^2.2.1",
"vue-scrollto": "^2.18.1"
},
"devDependencies": {
"gridsome-plugin-tailwindcss": "^2.2.48"
}
}
```

Da, wo die Formatierungsmöglichkeiten von MarkDown nicht ausreichen, kann man sich mit Html-Tags behelfen:

<div  class="container-inner text-2xl text-green-700 mt-8 mb-3 "> Man kann auch jederzeit einfach 
mal ein html-Element verwenden. Funktioniert sogar mit den 
Tailwind.css Utility-Klassen! </div>

Horizontale Linie:

so:

---

oder so:

---

Horizontale Linie:

so:

---
oder so:
***

Und schließlich ein paar Links:

Zurück zum Anfang

[Zurück zum Anfang](#top)