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?
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 sehr empfehlenswerten 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 Schreiben 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
Apropos Suchmaschinenoptimierung: Wenn Sie dieses Thema interessiert, dann habe ich hier einen Geheimtipp für Sie: 1 Jahr bei Project24 von Income School: Erfahrungsbericht!
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.
Sie verwenden WordPress auf Ihrer Website, so wie ich? Dann sollten Sie als nächstes unbedingt lesen, wie man die Markup-Sprache Markdown in WordPress einsetzen kann, gleich hier auf WebsiteBerater.com.
Dort beschreibe ich, was die beiden Standard-Editoren in WordPress (der Classic Editor und der neue WordPress Block-Editor 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>
Sind diese Code-Beispiele übrigens nicht super praktisch und wunderschön anzusehen? Wie man solche Code-Beispiele in WordPress anzeigt, habe ich (dringende Empfehlung!) in meinem Artikel So geht’s: Code-Beispiele auf der WordPress-Website im Detail beschrieben. Das spezifische Plugin, das ich benutze, beschreibe ich in Das Enlighter WordPress-Plugin: Installation, Einstellungen, Vorteile.
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-Block-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. Herunterladen kann man jedoch die Unterstützung von Markdown für Programme auf dem eigenen Computer oder spezielle Markdown-Editoren.
Die Unterstützung für Markdown findet man auch oft Online auf Websites und Plattformen, die es Besuchern ermöglichen, Web-Inhalte zu formatieren. Dabei findet auch die Übersetzung von Markdown in HTML online statt. Für lokales Markdown gibt es 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 |
|---|---|---|---|
| Katze | Adler | Forelle | Fliege |
| Hund | Mäusebussard | Karpfen | Biene |
| Pferd | Fink | Hecht | Ameise |
Somit kennen Sie jetzt bereits ein deutlich fortgeschrittenes Beispiel einer Markdown-Anwendung. Tabellen sind übrigens auch per se und in WordPress ein fortgeschrittenes Thema. Neugierig? Dann lesen Sie als nächstes unbedingt meinen Artikel Tabellen in WordPress, einfach erklärt.
Ihr Feedback zu diesem Artikel
Über Feedback zu diesem Artikel freue ich mich. Lassen Sie unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!
Weitere Informationen
Zum Schluss nochmal die Links zu meinen beiden Detail-Artikeln, die Sie unbedingt als nächstes lesen sollten, je nachdem, ob Sie sich eher für Markdown oder Markup interessieren. Und falls Sie eigentlich eher and WordPress Websites interessiert sind, dann verpassen Sie auf keinen Fall die Übersicht zur Komplettanleitung für eine WordPress Website!
