CMSstash

Markdown für Webseiten

Markdown liegt bei Webseiten stark im Trend. Immer mehr Content Management Systeme nutzen die einfache Auszeichnungssprache als sichere und schlanke Alternative zu den üblichen HTML-Editoren. Und auch immer mehr Autoren wissen die Vorteile von Markdown zu schätzen. Ganz im Mainstream ist Markdown zwar noch nicht angekommen, doch mit der Verbesserung der Markdown-Editoren könnte sich das in nächster Zeit ändern.

Vorteile von Markdown

Der größte Vorteil von Markdown für Autoren ist die enorme Geschwindigkeit, mit der die Inhalte formatiert werden können. Während ein Autor bei einem klassischen HTML-Editoren für jede noch so einfache Formatierung den Schreibprozess unterbrechen muss, um ein Wort oder einen Absatz zu markieren und einen Formatierungs-Button zu klicken, kann er bei Markdown den Formatierungsprozess ganz einfach in den Schreibprozess integrieren. Denn die Formatierung von Inhalten erfolgt bei Markdown über ein paar intuitive Zeichen wie ein Bindestrich für Auflistungen - oder die Raute für Überschriften #.

Schneller schreiben mit Markdown. Beispiel von Prosemirror

Die Markdown Syntax

Vergleicht man die Markdown Syntax mit der HTML-Syntax, dann werden die Vorteile von Markdown schnell klar. Ein einfacher Text mit einer Überschrift, einem Absatz und einer Auflistung wird in HTML mit den folgenden HTML-Tags ausgezeichnet:

<h1>Eine Überschrift erster Ordnung</h1>
<p>Das ist ein Absatz, in HTML wird ein Absatz mit dem "p"-Tag für "paragraph" umschlossen</p>
<ul>
  <li>Eine komplette Liste wird in HTML</li>
  <li>als "unordered list" (ul) bezeichnet</li>
  <li>und ein einzelnes Listenelement</li>
  <li>mit "liste item" (li)</li>
</ul>

In Markdown kann die gleiche Formatierung viel einfacher erreicht werden:

# Das ist eine Überschrift

Ein normaler Absatz benötigt überhaupt keine Auszeichnung

- Und eine Liste wird so ausgezeichnet
- wie man es auch intuitiv machen würde.

Die Markdown-Syntax ist jedoch nicht nur einfach erlernt und schnell geschrieben, sondern man kann sie im Gegensatz zu HTML-Dokumenten auch deutlich besser lesen.

Markdown Cheatsheet

Leider sind bei Markdown nicht alle Formatierungen so einfach und eingängig wie oben demonstriert. Etwas gewöhnungsbedürftig empfinden manche Autoren die Auszeichnung von Links und Bildern, auch wenn die Syntax immer noch einprägsam ist. Dagegen wird die Erstellung von Tabellen mit Markdown von allen als Qual empfunden. Daher nutzen wir mal eine kleine Tabelle, um die wichtigsten Markdown-Auszeichnungen (unvollständig) aufzulisten:

Markdown Resultat
# Überschrift erster Ordnung
###### Überschrift sechster Ordnung
simple text Text oder Absatz
_italic_ or *italic* Kursiver Text
__bold__ or **bold** Fetter Text
- list item or * list item Auflistung
5. ordered list Aufzählung
--- Horizontaler Strich
[link text](http://typemill.net) Link
![alt text](/path/to/image.jpg) Bild
> interesting quote Zitat
|name |usage |
|-----------|-----------|
| My Name | For Me |
Tabelle
` Code (inline)
``` Code (Block)

Im Netz findet man neben der offiziellen Markdown-Definition von John Gruber viele nützliche Cheat Sheets, die den Einstieg in Markdown erleichtern.

Markdown mit Split-Screen

Für Gelegenheits-Autoren, die eine Arbeit mit den üblichen WYSIWYG-Editoren gewohnt sind, galt Markdown bislang als unschöne Einstiegs-Hürde, da der gewohnte WYSIWYG-Modus fehlt. Frühe Markdown-Editoren wie Pagedown von Stack Overflow (hier ein Fork) haben versucht, diesen Mangel über einen Split-Screen auszugleichen. Bei einem Split-Screen erscheint neben dem Eingabefeld die formatierte HTML-Ausgabe in Echtzeit. Hier ein Beispiel von Stackedit mit einem Split-Screen und einem moderneren Teil-WYSIWYG:

Split-Screen von Stackedit

Die Implementierung solcher Split-Screens für Markdown ist heute extrem einfach. Das Framework Vue.js benötigt in seinem Markdown-Beispiel gerade einmal 16 Zeilen Code. Split-Screens werden jedoch von nicht-technischen Autoren im Vergleich zu dem WYSIWYG-Modus klassischer HTML-Editoren immer noch als Einschränkung empfunden, zumal sich Split-Screens nicht immer elegant in eine Autoren-Oberfläche integrieren lässt.

Markdown mit WYSIWYG

Eine neue Generation von Markdown-Editoren verzichtet auf den Split-Screen und nähert sich dem gewohnte WYSIWYG-Modus deutlich stärker an. Sehr bekannt und beliebt ist dabei SimpleMDE, ein Markdown-Editor, der (wie viele andere) auf CodeMirror basiert. SimpleMDE behält die Mardkown-Syntax bei, formatiert den entsprechenden Abschnitt jedoch direkt im Editor mit dem entsprechenden HTML-Format. Dadurch hat man beides: Den WYSIWYG-Modus und die entsprechende Markdown-Syntax. Andere Editoren schließen die Lücke komplett: Das (recht komplexe) Editor-Framework Prosemirror Wandelt die Markdown-Syntax sofort in die gewohnte WYSIWYG-Ausgabe um.

Markdown-Editor mit Prosemirror

Der Vorteil des vollständigen WYSIWYG-Modus: Autoren können über die Format-Buttons den Text auszeichnen und erhalten umgehend das gewohnte visuelle Feedback. Gleichzeitig können die Autoren jedoch auch direkt die Markdown-Syntax im Editor nutzen und so die Auszeichnungs-Buttons umgehen. Einen ähnlichen Ansatz verfolgt der auf CodeMirror basierende TUI-Editor oder das auf React aufbauende Editor-Framework Editor Slatejs. Mit diesen neuen Editoren lässt sich im Web eine ähnliche Usability erzeugen, wie man sie bereits von Offline-Editoren wie Typora gewohnt ist.

Verbreitung von Markdown

Markdown ist bereits heute im Web sehr stark verbreitet. Plattformen wie StackOverflow, GitHub und sogar das beliebte Tool Trello nutzen Markdown oder ihre eigenen Markdown-Varianten. Wenn es um Webseiten und Content Management Systeme geht, ist die Verbreitung allerdings höchst unterschiedlich. Static Site Generatoren arbeiten mehr oder weniger ausschließlich mit Markdown. Auch Flat-File-CMS setzen so gut wie immer auf Markdown als Auszeichnungssprache.

Bei traditionellen Content Management Systemen ist die Verbreitung deutlich geringer. Manche jüngeren Systeme wie OktoberCMS setzen bereits in der Standard-Installation auf Markdown. Die meisten Systeme nutzen jedoch nach wie vor einen klassischen HTML-Editor. Da sich Markdown jedoch in den letzten Jahren auch zunehmend im Nicht-Technischen Umfeld verbreitet hat, bleibt abzuwarten, ob die neue Generation der WYSIWYG-Editoren Markdown auch bei den etablierteren Content Management Systemen zum Durchbruch verhilft. Zumindest sollte mit der zunehmenden Verbreitung von Markdown in populärer Software wie Trello und den neuen WYSIWYG-Editoren die Nutzung von Markdown in Zukunft kein KO-Kriterium für Content Management Systeme mehr sein, sondern vielmehr ein Pluspunkt.

Markdown: Universalformat mit Tücken

Eines ist klar: Markdown hat viele Vorteile und ist im Vergleich zu HTML ein simples und vergleichsweise universelles Format. Denn mit Hilfe von Entwickler-Bibliotheken lassen sich Markdown-Dokumente nicht nur sehr einfach in HTML transformieren, sondern auch in andere Formate wie zum Beispiel XML oder ePub umwandeln. Wenn man dann noch für seine Webseiten einfache Markdown-Files anstelle von klassischen Datenbanken nutzt (beispielsweise bei Flat-File-Systemen oder bei Static-Site-Generatoren), dann werden die Inhalte endgültig flexibel. Die Mardkown-Dateien kann man von einem System in das andere verschieben, aufwändige Datenbank-Backups entfallen und man kann die Dateien auch mit Offline-Editoren bearbeiten. Der Schreib-Prozess ist damit völlig frei und die Inhalte sind von der Webseite weitestgehend entkoppelt.

Viele tolle Eigenschaften, wären da nicht die unterschiedlichen Dialekte und Erweiterungen. Denn neben Markdown gibt es noch die Erweiterung "Markdown Extra" mit zusätzlichen Format-Optionen, es gibt GitHub-Flavoured Markdown, es gibt CommonMark, es gibt die eigenständige Auszeichnungssprache Textile und natürlich noch das Markup von Wiki (Wikitext). Gerade Web-Worker dürften sich hin und wieder die Haare raufen, wenn beispielsweise Projektmanagement-Tools wie Redmine ganz andere Auszeichnungen nutzt als Jira oder das eine Content Management System Markdown-Erweiterungen bietet, die das andere nicht untersützt.

Die Vielsprachigkeit ist sicherlich nicht hilfreich für die Verbreitung von Markdown. Dennoch dürften die Vorteile vor allem für professionelle Autoren und Vielschreiber auf Dauer überwiegen.

Tägliche CMS-News für Entwickler, Designer, Projektmanager und Anwender gibt es von @CMSstash auf Twitter. Twitter kann auch gerne für Hinweise zu Texten genutzt werden.

Zuletzt aktualisert: 19.06.2018