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 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>

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 also wesentlich besser lesbar als die HTML-Syntax, außerdem natürlich einfacher zu lernen und schnell geschrieben.

Markdown Cheat Sheet

Anders als bei normalen Text-Dokumenten entstehen Absätze oder andere Inhaltsblöcke bei Markdown 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 ein 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
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.

Wie man bei dem verlinkten Bild sieht, können Markdown-Elemente auch ineinander verschachtelt werden. Dennoch fehlen zahlreiche Elemente wie beispielsweise Tabellen. Um solche und andere Elemente bei Markdown zu ermöglichen, ist HTML in Markdown erlaubt. Es gibt allerdings auch einige Erweiterungen von Markdown, 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 über die Pipe | erstellt werden:

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

Die Syntax für Tabellen ist zwar recht flexibel (mit dem Doppelpunkt : lässt sich beispielsweise die Text-Ausrichtung bestimmen), komplexere Tabellen gehören jedoch verständlicherweise zu den unbeliebtesten Elementen in Markdown.

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 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 Code-Blöcke in Markdown jede Zeile 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. Man kann so gut wie allen Elementen durch eine geschweifte Klammer eine ID oder eine Klasse zuweisen. Dadurch kann man beispielsweise auch einen Anker zu einer Überschrift erstellen:

## Header 2  {#header2}

[Link to header](#header2)

Oder Bildern und Links eine Klasse bzw. ID zuweisen und so zum Beispiel die Ausrichtung von Bildern über CSS festlegen:

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

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

Markdown-Editoren

Wer nun endlich loslegen und für seine Webseite Markdown nutzen will, dem steht eine recht breite Palette an unterschiedlichen Web-Editoren zur Verfügung. Für einzelne Dokumente kann man mit einfachen Scripten sogar komplett auf einen Editor verzichten. Bei den Editoren kann man zwischen klassischen Split-Screens, einem Teil-WYSIWYG oder bei der neueren Generation einen vollwertigen WYSIWYG-Modus nutzen.

Markdown ohne Editor

Wer auf die Integration eines komplexen Web-Editors verzichten möchte, der kann Scripte wie Markdeep nutzen. Das Script wird einfach am Ende des Markdown-Dokuments integriert, anschließend muss die Datei von .md in .md.html umbenannt werden.

Markdeep generiert aus dem Dokument eine sauber 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 das auf Dokumentationen spezialisierte Flatdoc, allerdings ist Flatdoc auf die übliche Markdown-Syntax beschränkt.

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 für sein Markdown-Beispiel gerade einmal 16 Zeilen Code. 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 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 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 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: 17.07.2018