Quelle: https://www.wikimedia.org/

Ein Tutorial für alle Steemians, die ihre Blog-Posts, oder Programmierer die ihre git README.md Dateien strukturieren und stylen möchten. Meine Inspiration zum Artikel. Ursprüngliche Inhalte des Artikels wurden von mir erweitert, umstrukturiert, ins Deutsche übersetzt und abgeändert.

Jedes Markdown-Element wird von einem Interpreter in echtes HTML übersetzt, daher sollte auch die stärkste Überschrift nur einmal vorkommen zwecks Suchmaschinen-Optimierung. In den folgenden Beispielen siehst du zuerst WAS erzeugt wird und nachfolgend WIE es erzeugt wird.

Fragen dazu beantworte ich dir gerne in den Kommentaren!

---

Überschriften

Übersicht aller verfügbaren Überschriftsarten

Überschrift 5

Überschrift 4

Überschrift 3

Überschrift 2

Überschrift 1

##### Überschrift 5
#### Überschrift 4
### Überschrift 3
## Überschrift 2
# Überschrift 1

---

Texthervorhebungen

Sternchen oder Unterstriche.

Stark hervorheben, aka fett, mit Sternchen oder Unterstrichen.

Kombinierte Hervorhebung mit Sternchen und Unterstrichen.

Zerstör das. Hier noch ein hervorgehobener Text.

*Sternchen* oder _Unterstriche_.

Stark hervorheben, aka fett, mit **Sternchen** oder __Unterstrichen__.

Kombinierte Hervorhebung mit **Sternchen und _Unterstrichen_**.

~~Zerstör das.~~ Hier noch ein `hervorgehobener` Text.

---

Geordnete Liste

1. Apfel
2. Birne
3. Himbeere

1. Apfel
2. Birne
3. Himbeere

---

Ungeordnete Liste

• Artikel 1
• Artikel 2
• Artikel 3

• Artikel 4

* Artikel 1
* Artikel 2
* Artikel 3
- Artikel 4

---

Kommentare

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd

Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

>>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 

>>>Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

---

Email-Links

[email protected]

<[email protected]>

---

URL-Links

Inline-Stil

Inline-Stile mit Titel

Link der auf eine Variable refereziert

Man kann auch Zahlen als Variablen für Links hernehmen

URLs ohne und URLs in spitzen Klammern werden automatisch zu Links umgewandelt. http://www.example.com ohne und http://www.example.com mit eckigen Klammern drumherum.

[Inline-Stil](https://www.duckduckgo.com)

[Inline-Stile mit Titel](https://www.duckduckgo.com "DuckDuckGo - privat suchen")

[Link der auf eine Variable refereziert][Irgend noch so ein Link]

[Man kann auch Zahlen als Variablen für Links hernehmen][1]

Oder einfach frei lassen und den [Link Text selbst verwenden].

URLs ohne und URLs in spitzen Klammern werden automatisch zu Links umgewandelt. http://www.example.com ohne und <http://www.example.com> mit eckigen Klammern drumherum.

[Irgend noch so ein Link]: https://www.mozilla.org
[1]: https://dopaminsoftware.com
[link text itself]: http://www.reddit.com

---

Code Hervorheben

Wird ersten Zeile eine Programmiersprache angegeben, wird der Code hervorgehoben. Sofern der verwendete Markdown-Interpreter das unterstützt. Steemit zum Beispiel nicht.

    ```javascript
`    let x = 0;
       console.log(x);
    ```

---

Tabellen

Senkrechte Striche können benutzt werden um Spalten zu trennen.

Person	Alter	Augenfarbe
Dominik	28	grün-blau
Oliver	26	braun
Andrea	28	braun

| Person        | Alter         | Augenfarbe |
| ------------- |:-------------:| ---------- |
| Dominik       | 28            | grün-blau  |
| OLiver        | 26            | braun      |
| Andrea        | 28            | braun      |

Es müssen mindestens 3 Leerzeichen vor jeder neuen Spalte kommen.
Vor jedem neuen Trenner/Strich muss ein Leerzeichen sein.
Die äußeren Striche sind vollkommen optional, du musst sie nicht machen.

Zeitsparender

Markdown	weniger	schön
Ausgabe	immer	noch schön
1	2	3

Markdown | weniger | schön
--- | --- | ---
*Ausgabe* | `immer` | **noch schön**
1 | 2 | 3

---

Abschnitte trennen

Drei oder mehr...

---

Striche

---

Sternchen

---

Unterstriche

---

Striche

***

Sternchen

___

Unterstriche

---

Youtube-Videos einbetten (so halb)

Da Markdown keine Einbettung eines Video-Players zulässt kann nur ein Vorschaubild mit Link zum Video gesetzt werden. Beachte, dass hier HTML eingebettet wird. Für erfahrenere Nutzer ergeben sich daraus viele Möglichkeiten.

Quelle: https://youtube.com

<a href="https://www.youtube.com/watch?feature=player_embedded&v=i4Eu3Cczkek" target="_blank"><img src="https://img.youtube.com/vi/i4Eu3Cczkek/0.jpg" alt="ALT TEXT HIER" width="50" height="80" border="10" /></a>

---

Das alles kann auch wie ein Bild-Link definiert werden. Wesentlich kürzer!

Quelle: https://youtube.com

[![IMAGE ALT TEXT HIER](https://img.youtube.com/vi/i4Eu3Cczkek/0.jpg)](https://www.youtube.com/watch?feature=player_embedded&v=i4Eu3Cczkek)

---

Bilder einbetten

Quelle: https://images.pexels.com

![Alternativer Text](https://images.pexels.com/photos/680257/pexels-photo-680257.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)

---

Danke fürs Lesen, freue mich über jeden Upvote oder Follower!