Alles über Markdown

12.05.2017

Die Auszeichnungssprache Markdown findet auch im Mainstream zunehmend Verbreitung. Zeit für eine kleine Einführung.

Vor einigen Jahren stand Wikipedia ziemlich in der Kritik. Die Art, wie man auf der Plattform Inhalte erstellt, galt vielen als Auslaufmodell. Denn Wikipedia nutzt seit jeher die Auszeichnungssprache "Markup", die oft als umständlich und wenig intuitiv empfunden wird. Die Nutzer haben sich stattdessen an HTML-Editoren und ein komfortables Schreiben im WYSIWYG-Modus gewöhnt (What You See Is What You Get). Oder sie editieren die Inhalte gleich auf der fertigen Webseite (Inpage-Editing), wie zum Beispiel bei der Blog-Plattform Medium.

Weitgehend unbemerkt vom Mainstream hat jedoch In den letzten Jahren eine andere Auszeichnungssprache eine Renaissance erlebt: Das Markdown. Ausschlaggebend waren unter anderem neue Tech-Portale wie GitHub oder StackOverflow. In deren Fahrwasser ist inzwischen ein ganzer Kosmos rund um Markdown entstanden: Es gibt unzählige Flat-File Content-Management-Systeme, die so gut wie immer auf Markdown setzen. Hinzu kommen Markdown-basierte statische Site-Generatoren und Code-Dokumentatoren wie Jekyll oder Slate. Und selbst in den Mainstream dringt Markdown zunehmend vor: Die DPA verwendet für ihre Pressemitteilungen bereits seit 2010 Markdown. Die beliebte Blog-Plattform Tumblr und das Organisationstool Trello nutzen Markdown. Und vor einiger Zeit ist das Smashing Magazine von WordPress auf einen statischen Site-Generator umgestiegen, sodass die Redakteure des Magazins nun ebenfalls mit Markdown schreiben. Ein guter Zeitpunkt, sich mit dem Thema ausführlicher zu beschäftigen.

Was ist Markdown?

Markdown ist, ähnlich wie Markup, eine einfache und (halbwegs) universelle Auszeichnungssprache zur Formatierung von Texten. Sie wurde im Jahr 2004 von John Gruber und Aaron Swartz spezifiziert.

Bei Markdown werden unterschiedliche Text-Formate wie Überschriften, Listen oder Kursivität mit einfachen Sonderzeichen markiert. Überschriften werden beispielsweise mit der Raute # ausgezeichnet. Listen werden mit dem Bindestrich - erstellt und *Kursivität* mit Sternchen oder Unterstrich umschlossen. Ein kurzes Beispiel:

# Überschrift erster Ordnung

Ein normaler Fließtext mit einem *kursiven* und einem **fetten** Wort.

- Eine ungeordnete Liste 
- mit mehreren 
- Listen-Elementen 

Insgesamt gibt es ein gutes Dutzend Zeichen, mit denen man einen Markdown-Text relativ intuitiv verfassen kann.

Markdown Ergebnis
# Überschrift 1
## Überschrift 2
*kursiv* kursiv
**fett** fett
- Liste Auflistung
1. Zählung Aufzählung
[Link](http://trendschau.net) Link
![Bild](/_themes/trendschau/img/favicon.ico) Bild
> Ein Zitat Zitat
`Inline code` Inline code
““ Code-Block ““ Code-Block

Schöne und schnelle Übersichten findet man zum Beispiel auf der Seite von Commonmark, bei Remarq.io oder auf Wikipedia. Die Original-Spezifikation kann man auf der offiziellen Markdown-Projektseite nachlesen.

Wie erstellt man Markdown?

Markdown kann grundsätzlich mit jedem Text-Editor und jedem Schreibprogramm erstellt werden. Denn Markdown sind nur einfache Text-Dateien, die statt der Endung .txt die Endung .md erhalten. Man kann also sogar Word dazu missbrauchen, indem man die Dateien als .txt abspeichert und anschließend in .md umbenennt. Ansonsten taugt auch jeder simple Text-Editor, ein Code-Editor oder einer der vielen spezieller Markdown-Edioren, die weiter unten noch vorgestellt werden.

Die Vorteile von Markdown

Wenn man die Arbeit mit HTML-Editoren gewohnt ist, sind die Vorteile von Markdown vielleicht nicht sofort offensichtlich, werden bei der praktischen Arbeit aber schnell erkennbar:

  • Mit Markdown lassen sich Texte insbesondere von Vielschreibern schneller formatieren, denn man muss den Schreibprozess nicht für das Drücken von Formatierungs-Buttons unterbrechen, sondern man kann die Formatierung in den Schreibprozess integrieren.
  • Im Gegensatz zu reinem HTML ist Markdown gut lesbar und einfach erlernbar.
  • Markdown ist universell und kann nicht nur leicht in HTML, sondern auch in andere Text-Formate umgewandelt werden.
  • Man braucht keine spezielle Software für Markdown, simple Text-Editoren reichen prinzipiell aus.
  • In Kombination mit Files erhält man die volle Kontrolle und Unabhängigkeit.

Diese Vorteile weiß man vor allem dann zu schätzen, wenn man seine Texte umziehen oder seine Webseite umstellen will. In so einem Fall kann man bei WordPress zwar einen Dump von der Datenbank ziehen oder einen XML-Export bemühen. Wenn man Glück hat findet man sogar irgendwelche Import-Funktionen im neuen Ziel-System. Doch so richtig frei verfügbar und nutzbar sind die Texte nicht. Dagegen sind Markdown-Files immer und überall einsetzbar: Man kann sie per FTP vom Server herunterladen, sie als Backup auf dem Desktop speichern, offline mit den einfachsten Programmen bearbeiten und sie in ein anderes System schieben. Flat-File-Systeme, statische Site-Generatoren, GitHub, Dropbox, und was das Tool-Repertoire sonst noch bereit hält.

Die Nachteile von Markdown

Es gibt natürlich auch Nachteile von Markdown:

  • Auch wenn es inzwischen einige WISYWIG-Editoren gibt, so bieten die meisten Markdown-Editoren maximal ein Preview-Fenster, sodass die Nutzer erst einmal ihre Schreib-Gewohnheiten umstellen müssen.
  • Die Formatierungs-Optionen von Markdown sind begrenzt, werden aber von Zusatz-Bibliotheken wie Markdown Extra erweitert.
  • Es gibt mehrere Variationen von Markdown, sodass eine Interpretation und Umwandlung nicht immer ganz eindeutig ist.

Der fehlende WISYWIG Modus dürfte der Hauptgrund für die derzeit noch geringe Verbreitung von Markdown außerhalb der technik-affinen Szene sein. Allerdings tut sich auch hier inzwischen einiges: Typora ist beispielsweise ein Offline-Editor mit einem (meist) sehr angenehmen WISYWIG-Modus. Und Content-Management-Systeme wie Grav bieten inzwischen auch gute Online-Editoren mit einem WISYWIG-ähnlichen Modus an.

On- und Offline-Editoren für Markdown

Wem das neutrale Erstellen von Markdown-Files mit Hausmitteln wie dem Windows-Editor oder Code-Editoren wie Sublime Text nicht ausreicht, der kann auf einen der zahlreichen Markdown-Editoren zurückgreifen. Angesichts der vielen sehr guten Übersichten im Web ist es müßig, hier nochmal eine neue Übersicht zu erstellen. Stattdessen verweise ich einfach mal als Startpunkt auf den Ineja-Blog, der zahlreiche Online und Offline-Lösungen auflistet und beschreibt. Obwohl sehr umfangreich, ist auch diese Übersicht noch längst nicht vollständig, es lohnt sich also, intensiv auf die Suche zu gehen.

Ich selber arbeite mit dem recht neuen Editor Typora, da er einen vollständigen WISYWIG-Modus anbietet und sehr reduziert wirkt:

Der WISYWIG-Modus ist nett, bringt allerdings auch einige typische Nachteile mit sich. Zum Beispiel entspricht die Beendigung einer Liste bei Typora nicht unbedingt den gängigen Gewohnheiten und man ist häufiger gezwungen, in die "Quellcode"-Ansicht zu wechseln. Eine Alternative, die ich allerdings noch nicht ausprobiert habe, könnte der Moeditor sein.

Markdown-Editoren für Web-Projekte

Wer einen Markdown-Editor in sein Web-Projekt integrieren möchte, der findet im Web zahlreiche Scripte. Anders als bei den Offline-Editoren existiert derzeit jedoch noch kein vollwertiger WISYWIG-Editor als integrierbares Script. Stattdessen arbeiten die meisten Editoren mit einem Preview-Window oder verzichten vollständig auf eine Vor-Ansicht. Das von Stackoverflow genutzte und inzwischen veraltete Script Pagedown ist ein gutes Beispiel für ein Preview Window, die älter Version von dem Flat-File-System Statamic nutzt das Script MarkItUp und verzichtet vollständig auf eine Voransicht. Andere Scripte schlagen eine Brücke zwischen reinem Markdown und einem WISYWIG-Modus. Das Flat-File System Grav nutzt beispielsweise den Code-Editor CodeMirror, einige Markdown-Editoren wie SimpleMDE basieren ebenfalls auf CodeMirror, während der neue Editor Woofmark auf Abhängigkeiten verzichtet.

Sieben Scripte werden etwas ausführlicher bei ourcodeworld vorgestellt. Bei meiner Recherche kamen noch einige weitere Scripte hinzu:

Name WISYWIG/Preview Abhängigkeiten Genutzt von
Bootstrap Markdown Editor Markdown-Editor für Bootstrap JQuery, Bootstrap, AceEdit Bootstrap
Code Mirror Code-Editor mit einem Teil-WISYWIG für Markdown JavaScript Grav CMS
Dillinger Code-Editor mit Preview-Fenster Node, Angular, Ace-Editor, Markdown-It unbekannt
Doxter Markdown-Editor-Plugin für CraftCMS Parsedown, CraftCMS Craft CMS
Editor.md Markdown-Editor mit Preview, letztes Update 2015 CodeMirror, jQuery, Marked unbekannt
Epic Editor Markdown-Editor mit Preview-Fenster JavaScript unbekannt
JS Markdown Editor Markdown-Editor mit Preview-Fenster, letztes Update 2015 JavaScript unbekannt
Kirby Visual Markdown Markdown-Editor von Kirby CMS Kirby CMS Kirby CMS
lepture editor Markdown-Editor, letztes Update 2015 CodeMirror unbekannt
Markdown-it Markdown-Editor für Commonmark mit Preview-Fenster JavaScript unbekannt
MarkItUp Markup-editor mit Preview-Fenster, u.a. Markdown und Textile JQuery Statamic, Atlassian
MirrorMark Mardkown-Editor auf Basis von Codemirror, letztes Update 2015 CodeMirror unbekannt
Medium Editor Markdown Markdown-Plugin für den Medium-Editor Medium-Editor unbekannt
Pagedown Markdown-Editor mit Preview-Fenster, es gibt diverse Clones auf GitHub JavaScript StackOverflow, HTMLy
ProseMirror Editor mit CommonMark und Markdown extensions contentEditable unbekannt
SimpleMDE Markdown editor mit Teil-WISYWIG JavaScript, CodeMirror, Font-Awesome Dato CMS, ProcessWire
Stackedit Markdown-Editor basierend auf Pagedown Pagedown unbekannt
tui.editor Markdown-Editor mit WISYWIG-Modus CodeMirror, JQuery unbekannt
Woofmark Recht neuer Markdown-Editor ohne Abhängigkeiten JavaScript unbekannt

Ich habe nicht alle Markdown-basierten CMS durchgeschaut, nicht ausgeschlossen, dass sich dort noch weitere Editoren verstecken. Soweit ich sehe basieren aber fast alle Lösungen auf eines der oben aufgeführten Scripte.

Markdown Parser

Wer mit Markdown in seinem Webprojekt arbeitet benötigt in jedem Fall auch einen Parser. Der Parser nimmt die Inhalte des Markdown-Files und transformiert sie in HTML, sodass am Ende eine Webseite ensteht. Es gibt JavaScript basierte Parser, die auch bei der Preview-Ansicht der Editoren zum Einsatz kommen. Und es gibt Backend-basierte Parser (z.B. PHP), mit denen man eher traditionell Markdown-Files transformiert und eine statische HTML-Seite ans Frontend schickt. Eine sehr gute übersicht findet man unter CSS-Tricks.

Bei meinem Projekt habe ich mich für Parsedown entschieden (PHP), da das Script sehr schlank ist und nach wie vor regelmäßig gewartet wird. Für Markdown Extra gibt es eine passende Parsedown-Erweiterung. Überzeugt hat mich vor allem, dass alle bekannten Flat-File-Projekte wie Kirby, Statamic, Grav oder das neue October CMS mit Parsedown arbeiten.

Die Integration in ein Projekt ist denkbar einfach: Entweder lädt den PHP-File von Parsedown manuell herunter und integriert es mittels incude() in sein Projekt. Oder (besser) man nutzt Composer und ergänzt seine Composer-Datei einfach um:

{
    "require": {
        "erusev/parsedown": "~1.4"
    }
}

Am besten integriert man auch sofort die Erweiterung Markdown-Extra, sodass Tabellen und weitere Funktionen zur Verfügung stehen:

{
    "require": {
         "erusev/parsedown": "~1.4"
         "erusev/parsedown-extra": "dev-master"
    }
}

Anschließend kann man die Bibliotheken nutzen, entweder nur Parsedown:

$Parsedown = new Parsedown();
echo $Parsedown->text('Hello _Parsedown_!'); # prints: <p>Hello <em>Parsedown</em>!</p>

Oder Parsedown Extra:

$Extra = new ParsedownExtra();
echo $Extra->text('# Header {.sth}'); # prints: <h1 class="sth">Header</h1>

Im Wiki findet man eine kleine Starter-Dokumentation, wer wie ich gerne Bewegt-Bild mag, der kann sich dieses kurze Tutorial auf Youtube anschauen:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus