CMSstash

Markdown für Webseiten

Autor: Sebastian Schürmanns

Markdown liegt bei Webseiten 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 Zukunft ändern.

Vorteile von Markdown

Für Autoren liegt der größte Vorteil von Markdown in der enormen Geschwindigkeit, mit der 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>

Mit Markdown kann dieselbe Formatierung viel einfacher erreicht werden:

# Das ist eine Überschrift

Ein normaler Absatz wird einfach mit Leerzeilen abgetrennt.

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

Die Markdown-Syntax ist also wesentlich besser lesbar als die HTML-Syntax, außerdem natürlich einfacher zu erlernen und sehr schnell geschrieben.

Markdown Cheat Sheet

Markdown kommt mit einem guten Dutzend Zeichen für die Formatierung von Dokumenten aus. Allerdings sollte an ein paar Regeln kennen. Anders als bei normalen Text-Dokumenten entstehen Absätze oder andere Inhaltsblöcke bei Markdown zum Beispiel nur dann, wenn sie durch eine Leerzeile (also zwei Returns) abgetrennt sind. Nur so ist es möglich, mehrzeilige Elemente wie Listen oder Tabellen als zusammenhängende Einheit zu erkennen. Weniger bekannt ist, dass man mit Markdown auch weiche Umbrüche erstellen kann. Dazu fügt man vor dem Return am Ende der Zeile zwei Leerschläge ein:

    Das ist ein normaler Absatz mit zwei Returns¶
    ¶
    Und das ist ein Absatz··¶
    mit einem weichen Umbruch (erzeugt ein <br/>-tag)

Ein weiteres Prinzip von Markdown ist der Einzug durch vier Leerzeichen oder durch einen Tab am Beginn einer Zeile. Mit dem Einzug lassen sich beispielsweise Listen mit Unter-Ebenen erstellen:

* List Item
* Another List-Item
····* Sub-Item
····* Sub-Item

Die folgende Referenz-Tabelle ist nicht ganz vollständig, enthält aber die wichtigste Syntax von Markdown:

Format Markdown
Absatz ¶ ¶Absatz¶ ¶
Weicher Umbruch ¶ ¶Text··¶
Überschrift erster Ordnung # Headline
Überschrift sechster Ordnung ###### Headline
Kursiver Text _italic_
Kursiver Text *italic*
Fetter Text __bold__
Fetter Text **bold**
Liste - list item
Liste * list item
Liste + list item
Aufzählung 5. ordered list item
Link [link text](https://cmsstash.de)
Bild ![alt text](/path/to/image.jpg)
Verlinktes Bild [![alt-text](/path/to/image.jpg)](https://cmsstash.de)
Zitat > interesting quote
Inline-Code `
Code-Block ····Write code here
Horizontaler Strich ---

Auf der Webseite von John Gruber findet man die offizielle Definition von Markdown mit der vollständigen Syntax und allen Regeln.

Anzeige

CMS-Experten erreichen

www.yourwebsite.com

Mit einer exklusiven Text-Anzeige auf CMSstash.de. Abrechnung pauschal oder per CPC möglich. Zum Media-Kit

Wie man bei dem verlinkten Bild sieht, können Markdown-Elemente auch ineinander verschachtelt werden. Dennoch fehlen ein paar wichtige Elemente wie zum Beispiel Tabellen. Um alle Elemente in einem Dokument zu ermöglichen, ist HTML in Markdown erlaubt. Es gibt allerdings auch Erweiterungen der Markdown-Syntax, die eine Verwendung von HTML mehr oder weniger überflüssig machen. Zu den Erweiterungen gehören CommonMark, GitHub Flavoured Markdown und Markdown-Extra.

Markdown-Extra Syntax

Markdown-Extra ist in den meisten Markdown-Libraries implementiert und erweitert die Markdown-Syntax um

Tabellen

Tabellen können bei Markdown-Extra über die Pipe | erstellt werden:

| name       | usage      |  
|-----------|-----------:| 
| My Name   | For Me    |

Tabellen zählen zu den unbeliebtesten Elementen in Markdown. Die Syntax ist zwar recht flexibel (mit dem Doppelpunkt : lässt sich beispielsweise die Text-Ausrichtung bestimmen), aber mit den Pipes lassen sich vor allem größere und komplexe Tabellen kaum noch überblicken.

Fußnoten

Fußnoten sind ein weiteres, häufig nachgefragtes Element bei der Erstellung von Dokumenten. Sie können in Markdown-Extra mit einer speziellen Referenz erstellt werden:

Ein Text mit einer Fußnote.[^1]

[^1]: Der Fußnoten-Text kann am Seiten-Ende platziert werden.

Abkürzungen

Abkürzungen können einmalig definiert werden. Anschließend wird die Abkürzung überall im Text als Title-Attribut angehängt und erscheint als Tool-Tipp bei Mouse-Over.

*[HTML]: Hyper Text Markup Language

*[W3C]: World Wide Web Consortium

Definitionslisten

Ebenfalls recht speziell sind Definitionslisten, die bei Markdown-Extra mit Hilfe eines Doppelpunktes erstellt werden:

Banana
:  A yellow fruit 

Code-Blöcke

Die Syntax für Code-Blöcke wird mit Markdown-Extra deutlich vereinfacht: Während man bei Markdown jede Zeile eines Code-Blocks einrücken muss, kann man bei Markdown-Extra einen Fenced-Code mit umschließenden Backtipps ohne Einrückung erstellen:

\````
<?php 
       echo "Hello";
<?php
\````

Attribute

Die Einführung von Klassen und IDs durch Markdown-Extra macht die Verwendung von HTML in Mardkown endgültig überflüssig. So gut wie alle Elemente können durch eine geschweifte Klammer eine ID oder eine Klasse bekommen. Dadurch kann man beispielsweise auch einen Anker zu einer Überschrift setzen:

## Header 2  {#header2}

[Link to header](#header2)

Außerdem kann man Bildern und Links eine Klasse bzw. ID zuweisen und so zum Beispiel die Ausrichtung von Bildern über CSS bestimmen:

![alt-text](/path/to/image.png){.floatRight}

[Link-Button](https://cmsstash.de){#id-for-js .style-as-button}

Markdown-Editoren

Wer nun endlich loslegen will und für seine Webseite Markdown nutzen möchte, dem steht eine recht breite Palette an unterschiedlichen Web-Editoren zur Verfügung. Bei den Editoren kann man zwischen drei Editor-Typen unterscheiden:

Für einzelne Dokumente kann man sogar komplett auf einen Editor verzichten und nur einen Markdown-Parser per Script einbinden.

Markdown ohne Editor

Wer nur ein einzelnes Dokument als Webseite veröffentlichen möchte, der muss kein CMS und auch keinen Markdown-Editor verwenden. Stattdessen kann man das Markdown-Dokument auf dem Desktop mit einem der zahlreichen Offline-Editoren erstellen und anschließend über ein eingebundenes Script eine Webseite generieren.

Eines dieser Scripte heißt Markdeep. Markdeep besteht aus einer einzelnen JavaScript-Datei, die einfach am Ende des Markdown-Dokuments eingebunden wird. Anschließend wird das Markdown-Dokument von .md in .md.html umbenannt und kann somit als Webseite aufgerufen werden.

Markdeep generiert aus dem Dokument eine saubere HTML-Seite und unterstützt neben der normalen Markdown-Syntax auch Erweiterungen für Diagramme, Kalender oder mathematische Formeln (LaTeX). Damit sind die Möglichkeiten praktisch unbegrenzt und übertreffen die Format-Optionen üblicher HTML-Editoren um ein Vielfaches.

Markdeep

Ähnlich wie Markdeep funktioniert auch Flatdoc, allerdings ist Flatdoc für Dokumentationen gedacht und unterstützt nur die übliche Markdown-Syntax.

Markdown mit Split-Screen

Früher war Markdown bei der Auswahl eines CMS häufig ein Ausschluss-Kriterium, weil die Autoren mit den üblichen HTML-Editoren einen WYSIWYG-Modus gewohnt waren. Viele Markdown-Editoren gleichen diesen Mangel mit einem Split-Screen aus, bei dem auf der einen Seite die Markdown-Syntax eingegeben wird und auf der anderen Seite zeitgleich eine HTML-Preview erscheint.

Split-Screen von Markcook

Die Implementierung solcher Split-Screens für Markdown ist heute extrem einfach. Das Framework Vue.js benötigt für sein Markdown-Beispiel neben der Markdown-Library gerade einmal 16 Zeilen Code. Online-Editoren, die mit dem klassischen Split-Screen arbeiten, sind unter anderem:

Editor Nutzung Genutzt von
Pagedown Script zur Einbindung Stack-Overflow, Stack-Exchange, HTMLy
Vue Markdown Editor Script zur Einbindung Vue.js
Markcook Stand-Alone Online-Editor -
Dillinger Stand-Alone Online-Editor -
Markdown-it Script zur Einbindung Einer der am häufigsten verwendeten Markdown-Parser

Split-Screens werden jedoch von nicht-technischen Autoren im Vergleich zum WYSIWYG-Modus klassischer HTML-Editoren immer noch als Einschränkung empfunden, zumal sich Split-Screens nicht immer elegant in eine Autoren-Oberfläche integrieren lassen.

Markdown mit Teil-WYSIWYG

Andere Editoren haben einen Teil-WYSIWYG-Modus eingeführt. Dabei werden einige Formatierungen unmittelbar beim Tippen direkt im Editor ausgeführt, allerdings wird die Markdown-Sytnax weiter angezeigt. Oftmals bieten diese Editoren zusätzlich auch noch einen Split-Screen an.

Markdown Editor SimpleMDE mit Teil-WYSIWYG

Bekanntester Vertreter ist SimpleMDE, der wiederum auf CodeMirror aufbaut. CodeMirror ist sehr verbreitet und wird von vielen Markdown-Editoren als Basis genutzt.

Editor Nutzung Genutzt von
SimpleMDE Script zur Einbindung Dato CMS, ProcessWire
Tui-Editor Script zur Einbindung TOAST
Stackedit Stand-Alone App -

Ein anderes und sehr eigenwilliges Beispiel ist der Medium-Markdown-Editor. Wie der Name schon sagt imitiert der Editor den Ansatz der bekannten Blog-Plattform Medium und blendet nach Markierung eines Textes eine kleine Format-Leiste ein. Im Hintergrund erzeugt der Editor aus dem HTML jedoch Markdown. Die Formatierungs-Optionen sind allerdings stark eingeschränkt und es lassen sich auch keine neuen Inhalts-Blöcke erstellen.

Der Medium-Markdown-Editor leitet jedoch über zu den vollwertigen WYSIWYG-Editoren.

Markdown mit vollem WYSIWYG

In jüngerer Zeit trifft man häufiger auf Markdown-Editoren, die einen kompletten WYSIWYG-Modus ermöglichen. Dabei wird sofort beim Tippen direkt im Editor die komplette HTML-Vorschau ausgezeichnet. Ein Split-Screen ist dann nicht mehr nötig. Ein Beispiel ist der Editor ProseMirror:

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. So lässt sich im Web eine ähnliche Usability erzeugen, wie man sie bereits von Offline-Editoren wie Typora gewohnt ist.

Diese Editoren basieren noch überwiegend auf recht komplexen Editor-Frameworks. Zwar können die Frameworks auch einfach integriert und entsprechende Beispiel-Scripte genutzt werden. Gedacht sind sie aber in vielen Fällen nur als Basis für individuelle Editoren, die erst aufwändig von Frontend-Entwicklern implementiert werden müssen. Beispiele für solche Frameworks sind:

Editor-Framework JS-Framework Genutzt von
ProseMirror JavaScript (Vanilla) NYTimes, Forestry.io, Atlassian
Quill JavaScript (Vanilla) Wagtail
Draft React.js -
Slate React.js -

Diese Frameworks sind derzeit also noch eher etwas für sehr erfahrene Frontend-Entwickler. Allerdings ist absehbar, dass sich dieser Editor-Typ in Zukunft noch weiter verbreiten wird und zahlreiche direkt integrierbaren Editoren auf Basis der Frameworks entstehen werden.

Verbreitung von Markdown

Markdown ist bereits heute im Web sehr stark verbreitet. Plattformen wie StackOverflow, GitHub und sogar beliebte Tools wie Trello und Slack 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 Markdown mit den neuen Editoren 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.

Auch andere Experten lesen gerne gute Inhalte und freuen sich, wenn Du diesen Artikel zum Beispiel über Twitter teilst. Auf Twitter gibt es außerdem von @CMSstash tägliche Updates.

Zuletzt aktualisert: 18.07.2018