Markdown ermöglicht eine Formatierung in Klartext. D.h. sie schreiben schnell und einfach strukturierte Inhalte für das Web. Diese Inhalte werden von einem Markdown-Parser in sauberes HTML konvertiert. Die Konvertierung erfolgt automatisch beim Anzeigen der Website.

Wird zu folgender Ausgabe:

HTML-Code:

<p>Der <em>rote</em> Fuchs, sprang <strong>über</strong> 
den faulen <a href=“https://en.wikipedia.org/wiki/Dog“>Hund</a>.</p>
									

Mit nur wenigen Zeichen, kann mit Markdown eine schöne Formatierung erreicht werden.

Warum lieben Autoren Markdown?

Sie behaupten, mit einen HTML-Editor erreicht man mit wenigen Klick das selbe Ergebnis? Das mag sein, aber die Vielzahl an Formatierungswerkzeugen hat seit einigen Jahren erheblich verändert. Die meisten Anfänger möchten gerne über Buttons und komplexe Menüs die Formatierungen erstellen. Fortgeschrittene Autoren schwören auf Markdown, weil es zu einem fließenden Schreibstil führt.

Mit einem herkömmlichen HTML-Tools müssen Sie das Schreiben immer wieder unterbrechen, um die Buttons und Menüs für die Formatierung zu bedienen. Dies führt zu einem unruhigen Arbeiten, zu unnötigem Stress und kostest viel Zeit.

Markdown ermöglicht es, die Finger auf der Tastatur zu lassen, weil sie die Formatierung „on-the-fly„ anwenden und der Schreibfluss nicht unterbrochen wird. Sie müssen für die Formatierung das Schreiben nicht unterbrechen, oder sich Gedanken machen, mit welchen Stilen sie nun die Formatierung noch umsetzen müssen.

Haben sie sich erst einmal umgestellt und an diesen Schreibstil gewöhnt, möchten sie nie wieder zurück zur reinen HTML-Formatierung bzw. zurück zum Arbeiten mit HTML-Editoren.

Für Überschriften auf der ersten Ebene, unterstreichen sie den Text mit Gleichheits-Zeichen.
Für Überschriften auf der zweiten Ebene, nutzen sie Minus-Zeichen.
Diese Art der Überschriften-Formatierung nennt man den ATX-Style und kann nur für H1 und H2 verwendet werden.

Alternativ können sie für Überschriften auch den Präfix "hash" (#), oder auch Setext-Style genannt, nutzen. Die Nummer des hash-Symbols ist dabei die Ebene der Überschrift. Zum Beispiel bedeutet ein einzelnes hash eine Überschrift auf der ersten Ebene, während zwei eine Überschrift auf der zweiten Ebene kennzeichnen:

Einen Umbruch in Form eines <br />, erreicht man, indem man am Ende einer Zeile zwei oder mehr Leerzeichen verwendet.
Absätze werden erzeugt, indem man eine Leerzeile zwischen den Zeilen verwendet.

Fett

Um fetten Text zu erstellen, umschließen sie den Texte entweder mit zwei Sternsymbolen (**), oder mit zwei Unterstrichen (__):

Kursiv

Um kursiven Text zu erstellen, umschließen sie den Texte entweder mit einem Sternsymbol (*), oder mit einem Unterstrich (_):

Fett+Kursiv

Um kursiven Text zu erstellen, umschließen sie den Texte entweder mit drei Sternsymbolen (***), oder mit drei Unterstrichen (___):

Unterstrichen

Unterstreichungen werde oft fälschlicherweise zur Hervorhebung von Texten verwendet. Laut HTML5-Spezifikation sollte man Unterstreichnungen ausschließlich für Hyperlinks verwenden. Seit HTML 4.01 ist das <u> Element veraltet (deprecated)!

In HTML5 sind Unterstreichungen nur für Außnahmen wie falsch geschriebene Wörter oder Eigennamen auf Chinesisch erlaubt. D.h. für Text, der sich stilistisch stark vom normalen Text unterscheiden soll.

In Markdown ist aus diesen Gründen eine underline-Formatierung nicht vorgesehen. Hyperlinks und Referenzen werden automatisch durch die jeweiligen CSS-Styles definiert. Benötigen sie dennoch eine Unterstreichung, müssen sie auf Standard-HTML zurückgreifen.

Aufzählungen beginnen durch eine Leerzeile und die Listenpunkte stehen in eigenen Zeilen, die mit *, - oder + (unnummerierte Liste) bzw. 1. (nummerierte Liste) eingeleitet werden, gefolgt von einem Leerzeichen.

Unterlistenpunkte werden mit mind. 4 Leerzeichen eingerückt. Dabei ist vollkommen egal, welche Zahl verwendet wird, da die Elemente der Reihenfolge nach automatisch durchnummeriert werden.

Ungeordnete Listen

Geordnete Listen

Verschachtelte Listen

Markdown unterstützt zwei Arten von Links: Inline und Referenzen. In beiden Stilen werden die anzuzeigenden Link-Texte mit [eckigen Klammern] markiert. Um einen Inline-Link (URL) zu erstellen, schreibt man hinter der schließenden eckigen Klammer normale Klammern. Innerhalb dieser Klammern wird die URL geschrieben, auf die verlinkt werden soll.

Ein Alttitel kann Optional als zusätzlicher Text mit Anführungsstrichen angegeben werden.

<p>
	Ich bekomme zehn Mal mehr Traffic von <a href=“http://google.com/“ title=“Google“>Google</a> als von 
	<a href=“http://search.yahoo.com/“ title=“Yahoo Search“>Yahoo</a> oder 
	<a href=“http://search.msn.com/“ title=“MSN Search“>MSN</a>.
</p>

Zugegebenermaßen ist es recht schwierig, eine „natürliche“ Syntax für das Einbinden von Grafiken in einfachem Textstyle zu finden. Markdown verwendet hierzu eine Syntax, die dem Stil von Links ähneln soll. Dies erlaubt zwei Arten: Inline und Referenz.

Die Inline-Syntax sieht so aus:

Also:

1. Ein Ausrufezeichen: !
2. gefolgt von einem Satz eckiger Klammern die den Wert des alt-Attributes für die Grafik enthalten;
3. gefolgt von runden Klammern, welche die URL oder den Pfad zur Grafik enthalten sowie den Wert eines optionalen title-Attributes, verpackt in Anführungsstriche.

Bildverweise im Referenz-Stil sehen wie folgt aus:

Für Tabellen werden senkrechte Striche (pipe, |) zur Abgrenzung der Spalten und Bindestriche (-) zur Abgrenzung des Tabellenkopfes (<thead>) von Tabellenkörper (<thody>) eingesetzt. Das folgende Beispiel zeigt dies.

Hier sehen Sie den HTML-Quelltext, der aus dem vorherigen Beispiel erzeugt wird:

 <table>
  <thead>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
      <th>Spalte 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt</td>
      <td>Inhalt</td>
      <td>Inhalt</td>
    </tr>
    <tr>
      <td>Inhalt</td>
      <td>Inhalt</td>
      <td>Inhalt</td>
    </tr>
  </tbody>
</table>										
										

Markdown bietet auch die Möglichkeit, an den Anfang und an das Ende jeder Zeile Pipes (|) zu setzen. Die Ausgabe ändert sich dadurch nicht. Es sieht nur für den ein oder anderen beim Bearbeiten der Tabelle besser aus.

Wie Sie gesehen haben, sind bei den letzten Beispielen die Spalten in jeder Zeile immer schön exakt gleich lang. Das hat allerdings rein ästhetische Gründe und dient der besseren Lesbarkeit der Tabelle im Rohzustand. Beim Bearbeiten der Tabelle sind Sie also nicht gezwungen, die Spalten in jeder Zeile exakt jedentisch lang zu machen. Das folgende Beispiel zeigt dies.

Innerhalb einer Tabelle kann man wiederum auch Standard-Markdown verwenden. Im folgenden Beispiel wird Text als kursiv (*), fett (**) und durchgetsrichen (~~) markiert.

Markdown bietet Ihnen zusätzlich die Möglichkeit, Text innerhalb einer Spalte nach links, mittig oder nach rechts auszurichten. Dazu setzen Sie bei der Trennline zwischen Tabellenkopf und Tabellenkörper Duppelpunkte (:) auf die Seite, nach der ausgerichtet werden soll. Bei der Textzentrierung setzen Sie auf beiden Seiten einen Doppelpunkt.

Hier sehen Sie den HTML-Quelltext, der aus dem vorherigen Beispiel erzeugt wird:

  <table>
  <thead>
    <tr>
      <th style=“text-align: left“>Links ausgerichtet</th>
      <th style=“text-align: center“>Mittig ausgerichtet</th>
      <th style=“text-align: right“>Rechts ausgerichtet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style=“text-align: left“>Inhalt</td>
      <td style=“text-align: center“>Inhalt</td>
      <td style=“text-align: right“>Inhalt</td>
    </tr>
    <tr>
      <td style=“text-align: left“>Inhalt</td>
      <td style=“text-align: center“>Inhalt</td>
      <td style=“text-align: right“>Inhalt</td>
    </tr>
  </tbody>
</table>
										

Markdown bietet Ihnen eine einfache Möglichkeit, Quelltext innerhalb eines Textes kenntlich zu machen. Sie müssen dazu den Quelltext mit Backtick-Zeichen (`) umschließen. Das folgende Beispiel zeigt dies.

Durch dieses Markdown-Beispiele wird folgender HTML-Quelltext erzeugt.

<p>Verwenden Sie die <code>echo</code>-Funktion.</p>

Backtick-Zeichen verwenden

<p><code>Verwenden des Backtick-Zeichens (`)</code>.</p>

Möchten Sie innerhalb des Textes nur das Backtick-Zeichen (`) als Quelltext kenntlich machen, dann umschließen Sie es wieder mit jeweils zwei Backtick-Zeichen und einem Leerzeichen. Die Leerzeichen stehen dabei nach dem öffnenen doppelten Backtick-Zeichen und vor dem schließenden doppelten Backtick-Zeichen. Die beiden Leerzeichen sind dann im generierten HTML-Quelltext nicht enthalten. Das folgende Beispiel veranschaulicht dies.

<p>Verwenden Sie das Backtick-Zeichen (<code>`</code>).</p>

Automatische Zeichenumwandlung

Innerhalb der Backtick-Zeichen (`) werden spitze Klammern (<, >) und das &-Zeichen zu ihren HTML-Entities kodiert. Dadurch können Sie zum Beispiel sehr bequem HTML-Quelltext innerhab eines Textes notieren, so wie es das folgende Beispiel zeigt.

<p>Das <code>&lt;html&gt;</code>-Tag leitet ein Dokument ein.</p>
<p>Durch das <code>&amp;</code>-Zeichen werden URL-Parameter getrennt.</p>

Sie können innerhalb eines Quelltextbereichs auch HTML-Entities ausgeben, da auch hier das &-Zeichen umgewandelt/ kodiert wird. Das folgende Beispiel zeigt dies.

<p>Das HTML-Entity <code>&amp;lt;</code> steht für das <code>&lt;</code>-Zeichen.</p>

Markdown bietet Ihnen eine einfache Möglichkeit, Quelltext-Blöcke kenntlich zu machen. Sie müssen dazu den Quelltext-Block mit mindestens vier Leerzeichen oder einem Tab einrücken. Das folgende Beispiel zeigt dies.

<p>Das ist ein normaler Absatz.</p>
<pre><code>Das ist ein Quelltext-Block.</code></pre>

Wenn Sie innerhalb des Quelltext-Blocks weitere Einrückungen vornehmen, dann wird bei der Umwandlung zu HTML jeweils eine Einrückungsebene (vier Leerzeichen oder ein Tab) entfernt. Das folgende Beispiel zeigt dies.

<p>Das ist ein normaler Absatz.</p>
<pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=“utf-8“ /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Ein Quelltext-Block endet entweder bei der ersten Zeile, die nicht mehr eingerückt ist oder, wenn der Quelltext-Block am Ende des Dokuments steht, am Ende des Dokuments. Das folgende Beispiel zeigt dies.

<p>Das ist der erste Absatz.</p>
<pre><code>&lt;html&gt;
    ...
&lt;/html&gt;
</code></pre>
<p>Das ist der zweite Absatz.</p>

Innerhalb von Quelltext-Blöcken wird Markdown-Syntax nicht verarbeitet/ interpretiert. So sind Sternchen dann auch einfach nur Sternchen - so wie es das nächste Beispiel zeigt.

<p>Das ist der erste Absatz.</p>
<pre><code>Text können Sie mit Sternchen *betonen*.
</code></pre>
<p>Das ist der zweite Absatz.</p>

Markdown verwendet für die Formatierung von Zitaten das >-Zeichen.

Der folgende Text zeigt Ihnen die Auszeichnung von Zitaten mit Markdown. Einigen von ihnen wird dies sicher aus E-Mails bekannt vorkommen. Und genau aus diesem Zusammenhang entstand diese Syntax.

<blockquote>
  <p>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.</p>
</blockquote>

Zitatebenen

Sie können, genauso wie bei E-Mails, auch mehrere Zitatebenen verwenden. Um eine weitere Zitatebene zu kennzeichnen, fügen sie einfach an den Zeilenanfang weitere >-Zeichen gefolgt von einem Leerzeichen ein. Um eine Ebene zurück zu kehren müssen Sie eine Leerzeile einfügen!
Das folgende Beispiel zeigt ihnen eine zweite Zitatebene für die zweite Zeile.

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

Markdown in Zitaten

Zitate können natürlich auch selbst andere Markdown-Auszeichnungen enthalten. Der folgende Text zeigt ihnen dazu beispielhaft, wie man innerhalb eines Zitats eine Überschrift (ersten Grades) notiert.

<blockquote>
  <h1 id=“lorem-ipsum“>Lorem ipsum</h1>
  <p>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.</p>
</blockquote>

Um mit Markdown eine horizontale Linie (<hr>-Tag) auzugeben, schreibt man drei oder mehr Bindestriche, Unterstriche oder Sternchen in einer Zeile. In dieser Zeile dürfen sonst keine anderen Zeichen stehen. Zwischen den Zeichen dürfen bis zu zwei Leerzeichen stehen.

Achtung: Wenn sie als Zeichen den Bindestrich verwenden, dann darf in der Zeile davor nichts stehen, da dies sonst als Überschrift (siehe Überschriften) interpretiert werden würde.

In HTML gibt es zwei Zeichen, die einer besonderen Behandlung bedürfen: < und &. Die linke spitze Klammer wird verwendet um HTML-Tags zu öffnen, das kaufmännische "Und" wird für benannte HTML-Zeichen (Entities) verwendet. Wenn diese Zeichen in HTML-Dokumenten dargestellt werden sollen (d.h. nicht als HTML-Entity), müssen sie auch entsprechend maskiert werden, also als &lt; und &amp;.

Das kaufmännische Und ist besonders unpraktisch für Web-Entwickler. Will man über „AT&T“ schreiben, muss man „AT&amp;T“ schreiben. Das kaufmännische Und muss sogar in URLs maskiert werden. In einem Link zur Seite

muss die URL wie folgt kodiert werden:

Dies wohl einer der häufigsten Fehler bei der Validierung von ansonsten wohlgeformten HTML-Dokumenten.Markdown erlaubt es, diese Zeichen ganz normal zu benutzen - es regelt die Kodierung. Wenn ein Kaufmanns-Und allerdings in einem Entity verwendet wird, wird es nicht kodiert. Wenn man also zum Beispiel ein Copyright-Symbol eingeben will, kann man einfach

schreiben, und Markdown wird dies nicht modifizieren. Aber aus

wird Markdown

machen. Da Markdown Inline HTML unterstützt, werden spitze Klammern im entsprechenden Fall ganz normal als HTML behandelt. Nur aus Sachen wie

wird Markdown

machen. In Code- oder Span-Blöcken werden spitze Klammern und das kaufmännische Und jedoch immer kodiert. Dies vereinfacht das Schreiben von HTML in Markdown (Im Gegensatz zu reinem HTML, wo dies meist ein Alptraum ist, jedes < und & zu kodieren).

Markdown ermöglicht es, Backslash-Maskierung zu nutzen um Zeichen zu schreiben, die sonst eine bestimmte Bedeutung in Markdowns Syntax haben. Wenn man zum Beispiel ein Wort mit Sternchen umgeben will (statt dem HTML-Tag <em>), kann man Backslashes vor die Sternchen stellen:

Markdown bietet diese Möglichkeit für folgende Zeichen: