Markdown

Blog-Artikel schreiben auf die einfache Art.

Dieser Artikel zeigt die gängigsten Markdown-Befehle die 99% der Fälle abdecken.

Was ist Markdown?

Platt gesagt: “Markdown ist ein vereinfachtes HTML”.
Es erlaubt ein schnelles und effizientes Schreiben von (Blog-)Artikeln, Notizen, README-Dateien, Wiki-Einträgen und mehr. Das Format ist kompakter, klarer strukturiert und somit leichter lesbar als HTML.

Je einfacher das Formatieren unserer Texte ist, desto mehr Aufmerksamkeit können wir in den eigentlichen Inhalt fließen lassen.

Folgende zwei Beispiel zeigen die Vorteile von Markdown eindrucksvoll:

1. Bsp: Die Definition einer Überschrift ersten Grades

In der HTML-Syntax sind 9 Zeichen zu tippen die, je nach Tastatur-Layout, umständlich sind:

<h1>Überschrift ersten Grades</h1>

mit Markdown nur zwei Zeichen… die Raute und ein Leerzeichen:

# Überschrift ersten Grades

2. Bsp:Definition einer unsortierten Liste

Wir wollen folgende Liste schreiben

Anna
Anke
Alina

mit HTML:

<ul>
<li>Anna</li>
<li>Anke</li>
<li>Alina</li>
</ul>

mit Markdown schlicht:

- Anna
- Anke
- Alina

Wer schon mit HTML gearbeitet hat und wem Markdown noch unbekannt ist… der wird von der Einfachheit begeistert sein.

Ein kleiner Markdown-Kurs

Folgender kleiner “Kurs” soll den Einstieg erleichtern und dem “Nachschlagen” dienen.

Überschriften

Von der größten (1. Grad) bis zur kleinsten (6. Grad) Überschrift.

# Überschrift ersten Grades
## Überschrift zweiten Grades
### Überschrift dritten Grades
###### Überschrift sechsten Grades

Es ist eine Geschmacksfrage: Du kreierst eine Überschrift ersten Grades durch das Unterstreichen mittels Gleichheitszeichen und eine Überschrift zweiten Grades durch Minus-Zeichen.

Überschrift ersten Grades
=========================

Überschrift zweiten Grades
--------------------------

Worte formatieren

Kursiv resp. betont

Einen wichtigen Hinweis kannst Du markieren, indem Du einem Text einen Stern * oder einen Unterstrich _ voran- und nachstellst.

Ein *wichtiger* Hinweis.
Ein _wichtiger_ Hinweis.

… wird zu:

Ein wichtiger Hinweis.

Fett resp. stark betont

Für einen sehr wichtigen Hinweis nimmst Du jeweils zwei Zeichen.

Ein **sehr wichtiger** Hinweis.
Ein __sehr wichtiger__ Hinweis.

Fett und kursiv

Ein Text wir fett und kursiv durch voran- und nachgestellte drei Sterne oder Unterstriche:
___fett-kursiver Text___ oder
***fett-kursiver Text***

Durchstreichen von Text

Manchmal werden Textpassagen obsolet, d.h. sie waren mal von Bedeutung, sind es nun jedoch nicht mehr. Statt sie gänzlich zu löschen ist das Durchstreichen eine mögliche Alternative.

Nutze zwei Tildezeichen ~~ zum Streichen von Wörtern.

Beispiel:
~~durchgestrichene Wörter~~
~~durchgestrichene Wörter~~

Unterstreichen

In Markdown existiert kein nativer Befehl für das Unterstreichen von Worten/Texten, weil laut Konvention (nur) anklickbare Links/Verknüpfungen unterstrichen werden.

Wenn Du dennoch einen Text unterstreichen willst, dann nutze den HTML-Befehl <u> </u>

Definition

Du willst einen Begriff definieren?

So gehts…

Begriff
: Die "Definition" ist dem Lateinischen entliehen und bedeutet "Abgrenzung".

Begriff “Definition”: Die “Definition” ist dem Lateinischen entliehen und bedeutet “Abgrenzung”.

Zeilenumbruch

Markdown umbricht eine Zeile,
wenn an ihrem Ende mindestens zwei Leerzeichen und ein Zeilenumbruch stehen. Andernfalls umbricht der Text am rechten Rand des Textkörpers, der Textspalte oder der Webseite.

Fußnote

Fußnoten sind sehr praktisch, weil sie auf weitere Informationen verweisen ohne den Lesefluss durch zu viele eingeschobene Worte zu unterbrechen. Dieser schlaue Hinweis stammt aus einem schlauen Buch¹. Dabei wird automatisch ein Link erstellt der direkt zur Fußnote und von dort aus wieder zurück führt.

Den Verweis auf die Fußnote erstellen wir mit [^1] und die Fußnote selbst mittels [^1]: Fußnotentext

Links - Verknüpfungen

Das Internet lebt von Verknüpfungen, weil sie das eigentliche “Netz spinnen”.

externe Links

Ein einfacher Link auf eine Seite entsteht durch spitze Klammern < >
So erzeugt bspw. <https://www.heildepot.de> den Link https://www.heildepot.de

Mehr Möglichkeiten bietet die Notation

[zum Heildepot](https://www.heildepot.de "Maustext")

weil sich angezeigter Text und Link-Adresse unterscheiden können. Zudem ist ein Info-Text definierbar der angezeigt wird, wenn der Mauszeiger den Link überfährt: zum Heildepot

interne Links

Interne Links vereinfachen das Navigieren auf längeren Seiten.

Ein Link auf den Seitenanfang erzeugt folgender Code
[Seitenanfang](#Anfang)

Der Anker am Seitenanfang sieht so aus:
<a name="Anfang"></a>

Bilder einbinden

Dieser Code ![alternativer Text](/images/markdown.svg "Markdown-Logo") bindet ein Bild ein.
Der alternative Text wird angezeigt, wenn kein Bild angezeigt wird. Der Text “Markdown-Logo” wird beim Überfahren des Bildes mit dem Mauszeiger angezeigt.

alternativer Text

“Eingezäunter” Quell-Code-Block

Code-Blöcke entstehen durch voran- und nachstellen von ```

{
af
asdf
sa
f
sdf
s
}

oder einfacher durch Einrücken: Mindestens vier Leerzeichen oder ein Tabulatorzeichen.

Absatz

Ein Absatz entsteht, wenn zwischen zwei Zeilen eine leere Zeile steht.

Wie hier.

Tabellen

Folgender Code erzeugt

|Nr. |Name  | Alter|
|--- | --- | ---|
|1| Anna |20|
|2| Anke |23|

diese Tabelle

Nr.	Name	Alter
1	Anna	20
2	Anke	23

Für komplexere Tabellen bieten sich Generatoren an:

https://www.tablesgenerator.com/markdown_tables

Zitate

Zitate werden mit einer schließenden spitzen Klammer > gefolgt von einem Leerzeichen generiert. Mit jeder weiteren Klammer >> wird der Text tiefer eingerückt.
Diese Syntax kennst Du evtl. von Deinem Email-Programm.

> Dies ist ein Zitat
> und so weiter...
>> noch eine Stufe tiefer
>> und so weiter...

Dies ist ein Zitat
und so weiter…

noch eine Stufe tiefer
und so weiter…

Listen

Unnummerierte Listen kannst Du wahlweise mit einem Bindestrich -, einem Plus + oder einem Stern * erstellen.

hier der Quell”Code”

- Anne
- Anke
- Alina
- Anna

… und das Ergebnis

Anne
Anke
Alina
Anna

Nummerierte Listen entstehen durch eine beliebige Zahl gefolgt von einem Punkt.

hier der Quell”Code”

Anne
Anke
Alina
Anna

und das Ergebnis

Anne
Anke
Alina
Anna

Die Zahlen selbst sind dabei belanglos. Der Markdown-Interpreter nummeriert einfach der Reihe nach durch. Das hat einen großen Vorteil: Stelle Dir eine laaange Liste vor an deren Anfang Du einen weiteren Eintrag hinzu fügst. Ohne die automatische Nummerierung müsstest Du die Nummer vor allen folgenden Einträgen um eins erhöhen. Das wird uns glücklicherweise vom Kompiler abgenommen.

Checkboxen

Die Code-Schnipsel ☐ und ☑ erzeugen
leere ☐ oder
gefüllte ☑ Checkboxen

Einfacher ist die MD-Notation

- [ ] noch zu tun
- [ ] auch noch zu tun
- [x] bereits getan

noch zu tun
auch noch zu tun
bereits getan

Sie tut zwar was sie soll, allerdings gefällt sie mir weniger, weil

die Punkte immer bleiben und
die Checkbox an dem Text “klebt”

Gut zu wissen

Escape-Zeichen

Wenn wir bestimmte Steuerzeichen wie bspw. eine spitze Klammer < darstellen wollen, dann ist dieses mittels Backslash-Zeichen \ zu “escapen”, weil es sonst als Steuerzeichen interpretiert wird.

Wenn du <**> schreiben willst, dann schreibe \<\*\*\>

Allerdings brauchen wir solche Konstrukte eher selten, weil diese speziellen Zeichen meist in Programmcode vorkommt. Diesen können wir als Code-Block darstellen in dem kein “escapen” erforderlich ist.

HTML

Manchmal kommen wir um HTML nicht herum. Zudem ist es praktisch, dass wir bestehende Texte in HTML-Notation direkt in unserem Markdown-Dokument einfügen können… das spart Aufwand und Zeit.

Knöpfe - Buttons

Ein Button wird per HTML erstellt

<button onclick="window.location.href = 'ZielAdresse';">Button-Text</button>

Navigation zu einem Anker auf der aktuellen Seite:

<button onclick="window.location.href = './index.html#Anfang';">zum Anfang springen</button>

Navigation auf eine andere Seite:

<button onclick="window.location.href = 'https://heildepot.de';">zum Heildepot.de</button>

Kombinieren geht auch

Auch Überschriften und Listeneinträge lassen sich formatieren als fett, kursiv, unter-/durchgestrichen etc..

Ebenso lassen sich die **Text-Formatierungen** kombinieren

Horizontale Linie

Eine horizontale Linie entsteht durch eine der folgenden Zeichenketten --- oder *** oder - - - oder * * *

Nachfolgend nutzen wir eine horizontale Linie um die Legende der Fußnote abzusetzen.

Literaturquelle ↩