[IMAGE: https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Markdown-mark-solid.svg/500px-Markdown-mark-solid.svg.png]
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

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

Das alles kann auch wie ein Bild-Link definiert werden. Wesentlich kürzer!
[IMAGE: https://img.youtube.com/vi/i4Eu3Cczkek/0.jpg]
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

[IMAGE: https://images.pexels.com/photos/680257/pexels-photo-680257.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb]
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!