Was ist gemeint, wenn jemand von Markdown spricht? Und: Was ist der Unterschied zwischen Markup und Markdown?

Markdown ist eine einfache und übersichtliche Art einer Markup-Sprache. Sowohl Markup im Allgemeinen und Markdown im Speziellen verwenden sogenannte Tags, die strukturelle Elemente in einem Text markieren, z.B. fett gedruckten Text oder eine Liste. Die Tags in Markdown sind jedoch besonders einfach und leserlich.

Am besten ist, ich zeige Ihnen einige Beispiele und beschreibe mehr Details, also los:

Wenn Markdown eine Markup-Sprache ist, was bedeutet dann überhaupt Markup?

Der Unterschied zwischen Markup und Markdown

Eine Markup-Sprache ist ein recht allgemeines, aber zugleich einfaches Konzept: Sie haben z.B. einen Text vor sich und möchten Teile davon hervorheben. Wenn Sie ein Buch lesen und sich wichtige Dinge für später markieren möchten, können Sie einen gelben Leuchtstift nehmen und die wichtige Passage im Text damit anstreichen. Oder Sie nehmen einen Bleistift und markieren am Buchrand alle wichtigen Zeilen mit einem senkrechten Strich.

Was auch immer Sie tun, sie haben damit der markierten Textpassage im Buch die Eigenschaft wichtig zugewiesen. Was beim Markup jedoch im Vordergrund steht, ist nicht die Erscheinung oder Darstellung dessen, was wichtig ist, sondern die Struktur. In unserem Beispiel wäre das: Wo beginnt der wichtige Teil und wo endet er? Diese Information ist für die wichtige Textpassage immer gleich, unabhängig davon, ob Sie nun einen gelben Leuchtstift oder einen Bleistift verwendet haben.

Um solche Strukturen in elektronischen Texten (oder Daten) zu markieren, verwendet man sogenannte Tags. Das sind Befehle, die im Ausgangs-Text bzw. Quelltext vorhanden sind, um die Struktur abzugrenzen. Diese Tags werden dann beim Umwandeln des Quelltexts in das fertige Dokument geeignet dargestellt. Wichtig kann z.B. als fettgedruckter oder kursiver Text dargestellt werden.

Mehr und grundlegendere Informationen über Markup und Markup-Sprachen finden Sie in einem weiteren Artikel hier auf WebsiteBerater.com. Er heißt Was Sie über Markup wissen müssen: Die 21 wichtigsten Fakten. Dort erfahren Sie unter anderem:

  • wie viele Markup-Sprachen es gibt
  • warum man die direkte Eingabe von Markup beim Scheiben sogar mögen kann
  • ob HTML eigentlich XML ist oder nicht
  • woher das “H” in “HTML” stammt
  • warum Sie Markup verstehen sollten, um erfolgreiche Suchmaschinenoptimierung auf Ihrer Website zu ermöglichen

Der Unterschied von Markup Tags im Allgemeinen und Markdown Tags im Speziellen

Typische Tags in Markup-Sprachen verwenden spitze Klammern, in denen dann der Befehl steht. Für fettgedruckten Text schreibt man z.B. <b>Das ist fettgedruckter Text</b> und erhält Das ist fettgedruckter Text. Der Befehl “b” kommt dabei vom englischen Wort “bold” für “fettgedruckt”. Andere Strukturen werden mit anderen Befehlen markiert.

Dieser Markup-Tag hat also eine Version für den Beginn einer Struktur (<struktur>) und eine für das Ende der Struktur, die durch einen Schrägstrich gekennzeichnet ist: </struktur>. Durch diese Art, Strukturen in elektronischen Dokumenten zu kennzeichnen, kann der Quelltext allerdings recht unleserlich werden.

Die Markup-Sprache Markdown ist der Versuch, bereits gut leserlichen Quelltext schreiben zu können, der dann auch noch umgewandelt und formatiert werden kann, wie in allen Markup-Sprachen. Um den obigen fettgedruckten Text in Markdown zu erzeugen, schreibt man einfach **Das ist fettgedruckter Text**, also einen Doppel-Asterisk vor und nach der zu markierenden Passage.

Bei fett gedrucktem Text ist der Unterschied zwar noch nicht so deutlich, aber hier sind noch ein paar andere Beispiele:

Der direkte Vergleich von Markup und Markdown: Typische Befehle

Vergleichen wir Markdown z.B. mit HTML, der Markup-Sprache, die von Ihrem Internet-Browser gelesen und in das umgewandelt wird, was Sie gerade lesen. Zwei konkrete Vergleiche möchte ich Ihnen hier noch zeigen. Zunächst fettgedruckten, kursiven Text und danach eine ungeordnete Liste.

Um in HTML fettgedruckten und kursiven Text zu erzeugen, schreibt man <b><i>Etwas Text</b></i> (also zwei separate Tags) und erhält Etwas Text. In Markdown schreibt man dazu ***Etwas Text***.

Um in HTML eine ungeordnete Liste, z.B. mit drei Einträgen, zu erzeugen, schreibt man <ul><li>Erster Eintrag</li><li>Zweiter Eintrag</li><li>Dritter Eintrag</li></ul> und erhält:

  • Erster Eintrag
  • Zweiter Eintrag
  • Dritter Eintrag

Um das gleiche in Markdown zu erreichen, schreibt man:

* Erster Eintrag
* Zweiter Eintrag
* Dritter Eintrag

Dabei hat also der Text in Markdown bereits eine gewisse Struktur. Die braucht man zwar in HTML nicht, dafür ist der Code aber unübersichtlicher und im Allgemeinen auch etwas länger. Klarerweise schreibt man grundsätzlich auch HTML-Code in etwas schönerem Format, doch was davon Inhalt ist und was Tags ist nicht so deutlich:

<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
</ul>

Herkunft und Entwicklung von Markup und Markdown

Die Entwicklung von Markup-Sprachen geht auf Entwicklungen im Drucksatz zurück, wo man einzelne Passagen, so wie im Beispiel oben, in einem anderen Schriftstil setzen oder anders hervorheben wollte. Die dazu eingeführten Markups, die entsprechende Passagen kennzeichnen, sind die Vorbilder für die Markup-Tags in elektronischen Texten.

Damit bei Dokumenten oder Informationen eine Struktur geschaffen werden kann, die je nach Vorliebe verschieden angezeigt werden kann (oder auch versteckt), hat man verschiedene Markup-Sprachen eingeführt. Diese erlauben im Prinzip auch selbst eingeführte Tag-Bezeichnungen (im XML) und sind somit sehr vielseitig anwendbar.

Markdown wurde ursprünglich als gut leserliche Markup-Sprache im Hinblick auf z.B. reine Text-Dateien bzw. Emails entwickelt. Mit der Zeit hat es sich darüber hinaus zu einer Anwendung als einfaches Eingabeformat für Texte entwickelt, die letztlich für das WWW gedacht sind. Eine Unterstützung von Markdown in einigen der aktuell gebräuchlichen Programmiersprachen ist ebenfalls dazu gekommen.

Einsatzgebiete von Markup und Markdown

Aus Quelltext in Markdown wird bei der Umwandlung Web-taugliches XHTML (erweiterbares HTML). Es kann daher überall eingesetzt werden, wo aus einfachem Text eine HTML-Datei für eine Website erzeugt werden soll. Für das Web gibt es zwar verschiedene Editoren, die direkt HTML-Code erzeugen, manchmal möchte man aber verhindern, dass HTML-Tags direkt für das Markup verwendet werden.

Das gilt z.B. für Internet-Foren oder ähnliche Fälle, in denen Gäste einer Website dort Inhalte schreiben können. Bei Foren-Einträgen oder Kommentaren auf einer Website wäre es riskant, einem Besucher zu erlauben, Text mit darin enthaltenen beliebigen HTML-Tags direkt auf z.B. der eigenen Website zu publizieren.

Dabei könnten ungewollte Elemente oder Links eingeschleust werden, durch die andere Besucher dann geschädigt oder auf andere ungewollte Inhalte umgeleitet werden könnten. Um das und ähnliche Dinge zu verhindern, werden HTML-Tags standardmäßig aus solchen Einträgen von Besuchern auf Websites entfernt.

Ein Zwischenschritt über Markdown ermöglicht es jedoch, trotzdem den Text zu formatieren, einfach zu gliedern, oder einzelne Passagen hervorzuheben. Die Übersetzung in HTML wird dabei kontrolliert ausgeführt, und nur erlaubte HTML-Elemente können erzeugt werden.

Welche Plattformen unterstützen bzw. nutzen Markdown?

Markdown wird in der einen oder anderen Form auf einigen bekannten Web-Plattformen eingesetzt, z.B. auf GitHub oder Stack Overflow. Andere Systeme wie etwa Wikipedia nutzen zwar ebenfalls eine vereinfachte Markup-Sprache, es handelt sich dabei jedoch nicht um Markdown, sondern z.B. im konkreten Beispiel von Wikipedia um Wikitext.

Auch wenn es viele verschiedene vereinfachte Markup-Sprachen gibt, kann Markdown-Unterstützung trotzdem parallel zu diesen eingebaut werden. Das gilt z.B. für Wikimedia, aber auch für die gängigsten Content-Management-Systeme für Websites. In WordPress verwendet man dafür z.B. ein Plugin, von denen es einige mögliche gibt.

Wenn Sie genauer wissen wollen, wie man auf einer WordPress Website die Markup-Sprache Markdown einsetzen kann, dann empfehle ich Ihnen meinen Artikel Die 5 wichtigsten Arten, Markdown in WordPress einzusetzen, gleich hier auf WebsiteBerater.com.

Dort beschreibe ich, was die beiden Standard-Editoren in WordPress (der Classic Editor und WordPress Gutenberg) bereits an Markdown-Befehlen beherrschen und was nicht. Außerdem beschreibe ich, dass es eine Rolle spielt, ob Sie dort Markdown hineinkopieren oder direkt schreiben.

Braucht man verschiedene Editoren für Markup bzw. Markdown?

Um Text in Markdown oder einer beliebigen anderen Markup-Sprache zu schreiben, braucht man keinen speziellen Editor. Ein simpler Text-Editor genügt. Text-Editoren, die auch Syntax-Highlighting in verschiedenen Programmiersprachen beherrschen, erleichtern das Schreiben von Markup, z.B. in HTML, allerdings deutlich.

Bei Syntax-Highlighting werden Elemente der jeweiligen Programmiersprache farblich hervorgehoben, während der eigentliche Text unscheinbar bleibt. Nehmen Sie als Beispiel die oben eingeblendete Liste in HTML. Hier ist sie nochmal:

<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
</ul>

Wie man solche Code-Beispiele in WordPress anzeigt, habe ich übrigens in meinem Artikel So geht’s: Code-Beispiele auf der WordPress-Website im Detail beschrieben.

Um für Markup oder Markdown bereits beim Schreiben eine Vorschau der formatierten Ausgabe zu sehen, braucht man allerdings einen Editor, der die Umwandlung der Tags beherrscht. Bei Foren im Internet kann dafür ein Vorschau-Kasten eingeblendet sein, in dem man sehen kann, was aus dem geschriebenen Markdown wird.

Andere Fälle sind sogenannte What-you-see-is-what-you-get (WYSIWYG)-Editoren, in denen man mehr oder weniger ein Dokument samt Formatierung für das WWW erstellt. In WordPress ist das seit Ende 2018 der Gutenberg-Editor, der damit zum offiziellen Nachfolger des bis dahin und auch weiterhin gebräuchlichen TinyMCE erklärt wurde.

Das Resultat ist in beiden Fällen HTML-Code, nur dass man bei WYSIWYG-Editoren bereits in einer beinahe akkuraten Darstellung arbeitet, ähnlich wie wir das von modernen Textverarbeitungsprogrammen gewohnt sind. Solche Editoren können die Verwendung von Markdown also im Prinzip auch ersetzen.

Muss, kann oder soll ich Markdown herunterladen?

Markdown an sich ist eine Konvention für die Übersetzung von Zeichen in Formatierung und kann per se nicht heruntergeladen werden. Die Unterstützung für Markdown findet man of Online auf Websites und Plattformen, die es Besuchern ermöglichen, Web-Ihnalte zu formatieren. Dabei findet auch die Übersetzung von Markdown in HTML online statt.

Herunterladen kann man jedoch die Unterstützung von Markdown für Programme auf dem eigenen Computer oder spezielle Markdown-Editoren. Es gibt unter anderem Erweiterungen für MS Word, die das Exportieren bzw. Importieren von Word-Dokumenten als bzw. aus Markdown-Dokumenten erlauben.

Als Editoren mit Vorschau findet man z.b. Markdownpad (für Windows) und MacDown (für Mac). Wenn ein Dokument als Markdown gespeichert ist, kann es direkt an der entsprechenden Stelle im WWW, in Emails oder sonstigen geeigneten Orten eingesetzt werden.

Wo finde ich Tutorials für Markup-Sprachen bzw. Markdown?

Tutorials für die vielen verschiedenen Markup-Sprachen findet man recht einfach im WWW. Für Markdown im Speziellen gibt es aufgrund des vergleichsweise begrenzten Umfangs der Syntax einige gute Cheat-Sheets, die das Wichtigste abdecken.

Denn alles, was man braucht, ist de facto eine Liste der Befehle. Hilfreich finde ich persönlich z.B. die beiden Auflistungen auf markdownguide.org und markdown.de. Zum Abschluss möchte ich hier noch ein etwas fortgeschrittenes Beispiel in Markdown anbringen, das den Unterschied in Lesbarkeit zu HTML noch etwas deutlicher macht.

Fortgeschrittenes Beispiel: Tabelle in Markdown

Eine Tabelle in Markdown ist recht einfach und übersichtlich zugleich. Hier ist ein Beispiel:

| Überschrift 1 | Überschrift 2 | Überschrift 3 | Überschrift 4 |
|---------------|---------------|---------------|---------------|
| Katze         | Adler         | Forelle       | Fliege        |
| Hund          | Mäusebussard  | Karpfen       | Biene         |
| Pferd         | Fink          | Hecht         | Ameise        |

Die gleiche Tabelle in HTML sähe folgendermaßen aus:

<table>
  <thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
      <th>Überschrift 3</th>
      <th>Überschrift 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Katze</td>
      <td>Adler</td>
      <td>Forelle</td>
      <td>Fliege</td>
    </tr>
    <tr>
      <td>Hund</td>
      <td>Mäusebussard</td>
      <td>Karpfen</td>
      <td>Biene</td>
    </tr>
    <tr>
      <td>Pferd</td>
      <td>Fink</td>
      <td>Hecht</td>
      <td>Ameise</td>
    </tr>
  </tbody>
</table>

Dargestellt auf der Website schließlich erhält man folgendes Ergebnis:

Überschrift 1Überschrift 2Überschrift 3Überschrift 4
KatzeAdlerForelleFliege
HundMäusebussardKarpfenBiene
PferdFinkHechtAmeise

Weitere Informationen

Wenn Sie weitere Informationen zum Thema Markup suchen, dann empfehle ich Ihnen meinen Artikel zu diesem Thema, der in Kürze erscheinen wird. Um mehr über Tabellen in WordPress zu erfahren, lesen Sie meinen Artikel Tabellen in WordPress, einfach erklärt.

Pin It on Pinterest