Wie style ich meine Posts?!? Ein Markdown Tutorial

in #markdown7 years ago (edited)

Markdown Logo
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]

<irgendwer@example.de>

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.

PersonAlterAugenfarbe
Dominik28grün-blau
Oliver26braun
Andrea28braun
| 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

Markdownwenigerschön
Ausgabeimmernoch schön
123
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.

ALT TEXT HIER
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!
IMAGE ALT TEXT HIER
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

Alternativer Text
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!

Sort:  

Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://answers.yahoo.com/question/index?qid=20090723193707AAJwh8a

I got commented on for using Dolar Ipsum? Your bot is a joke.

ja vergiss ihn, der is manchmal übergenau, ...