Wie style ich meine Posts?!? Ein Markdown Tutorial
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
- Apfel
- Birne
- 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]>
URL-Links
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
[](https://www.youtube.com/watch?feature=player_embedded&v=i4Eu3Cczkek)
Bilder einbetten
Quelle: https://images.pexels.com
Danke fürs Lesen, freue mich über jeden Upvote oder Follower!