Markup and Down Pt. 2

Seit Monaten evaluiere ich populäre Markupsprachen wie Markdown und Textile. ReStructured Text, Wiki Markup, Creole lass ich mal außen vor, weil es zu speziell wird und diese Sprachen einfach nicht weit genug verbreitet sind.

Mein Ziel ist es zum einen effizienter zu schreiben (Mausberührungen minimieren und keine komplizierten Auszeichnungen) und effizienteres Webauthoring zu betreiben.

Gerade der letzte Punkt ist oft das grosses Versprechen von Flatfile Content Management Systemen. "Erstelle deine Inhalte in Markdown".

Das mag stimmen, wenn man schnöde Textposts erstellt, aber für komplexe Layouts (3-Spaltige Teaserbox auf der Startseite?) fängt man an, HTML in die Markdown Datei einzubetten.

Markdown

https://de.wikipedia.org/wiki/Markdown

Effizientes schreiben von Dokus und Text im Allgemeinen ist durch Markdown ganz gut abgedeckt.

Leider ist Markdown aber auch fragmentiert. Es gibt einige Erweiterungen die nicht in allen Parsern implementiert sind. Fußnoten wären so ein Beispiel. Oder auch CSS Klassen.

Markdown ist nichts Halbes und nichts Ganzes. Es ist für einfaches Schreiben genial. Notizen, Dokus, E-Mails, selbst Blogposts.

Wenn man allerdings, im Webauthoring, etwas mehr als reinen Text will, z.B. eine Slideshow oder eine Bildergalerie eingebetten, dann muss man HTML bemühen und dann ist es aus mit der Einfachheit.


# Überschrift <small>Subtext</small>

Mein Absatz

<div style="float:right;">
    <img src="http://i.imgur.com/ZStdDkv.jpg">
</div>

| Spalte 1 |   Spalte 2  |
|----------|-------------|
| Inhalt   | Mehr Inhalt |
# Städte

<h2 data-coords="50.075538, 14.4378">Prag</h2>

Einleitungstext ohne Klassen

### 3. Überschrift

Text

<div class="map">
    <div class="map-wrapper">
        <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1473848775391!6m8!1m7!1sg1zfimSy-acAAAQZeVfhfw!2m2!1d50.07893751721421!2d14.4244816551045!3f175.48971657984794!4f-9.086622940641973!5f0.7820865974627469" width="600" height="450"></iframe>
    </div>
</div>

| Spalte 1 |   Spalte 2  |
|----------|-------------|
| Inhalt   | Mehr Inhalt |

---

<h2 data-coords="52.520007, 13.404954">Berlin</h2>

p. Text

Textile

https://txstyle.org/
https://de.wikipedia.org/wiki/Textile

Textile ist hier schon ausgereifter, weil es eine Menge an Notation für die Auszeichnung von HTML mitbringt.

Textausrichtung, Textauszeichnung sind problemlos möglich und mit CSS sind hier die meisten Anwendungsfälle abgedeckt.

h2. Überschrift

p.teaser Text wird mit der Klasse "teaser" ausgegeben und kann entsprechend mit CSS gestyled werden

Fußnoten?[1]

fn1.  Sind "Möglich!":https://txstyle.org/doc/11/footnotes

<form action="/">

* Textile
* Listenelement
* Rest ist HTML

<input>
</form>

Textile lässt sich etwas leichter schreiben, HTML und Textile Notation lassen sich mixen, somit ist etwas komplexeres Webauthoring möglich.

Automatische Fußnoten und komplexe Tabellen sind auch kein Problem.

Jedoch kommt man auch bei Textile nicht um HTML Tags herum, möchte man etwas spezieller werden.

Will man z.B. ein Element mit data- Attributen ausstatten, um eine Javascriptanwendung zu steuern, benötigt man HTML.


h1. Städte

<h2 data-coords="50.075538, 14.4378">Prag</h2>

p.teaser Einleitungstext

h3. 3. Überschrift

p. Text

<div class="map">
    <div class="map-wrapper">
        <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1473848775391!6m8!1m7!1sg1zfimSy-acAAAQZeVfhfw!2m2!1d50.07893751721421!2d14.4244816551045!3f175.48971657984794!4f-9.086622940641973!5f0.7820865974627469" width="600" height="450"></iframe>
    </div>
</div>

| Spalte 1 |   Spalte 2  |
|----------|-------------|
| Inhalt   | Mehr Inhalt |

hr.

<h2 data-coords="52.520007, 13.404954">Berlin</h2>

p. Text

Markup Sprachen sollen nicht HTML ersetzen, sondern das schreiben und Authoring vereinfachen, um konformes HTML zu erzeugen.
Muss man HTML in Markdown oder Textile einbetten, dann ist das Versprechen effizient schreiben zu können nicht eingelöst.
HTML Syntax ist hakelig, ohne Syntaxhervorhebung ein Grauen und es lassen sich somit auch leicht Syntaxfehler einbetten.

Die Rettung für mich war die aus der Node.js Welt kommende Template Spache

Pug (ehemals Jade)

https://pugjs.org

ähnlich wie Emmet, setzt Pug auf klammerlose HTML Syntax, welche durch Einrückungen strukturiert wird.

h1 Städte

h2(data-coords="50.075538, 14.4378") Prag

p.teaser 
    | Einleitungstext

h3 3. Überschrift

p Text
    | Über mehrere Zeilen

div.map
    div.map-wrapper
        iframe(src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1473848775391!6m8!1m7!1sg1zfimSy-acAAAQZeVfhfw!2m2!1d50.07893751721421!2d14.4244816551045!3f175.48971657984794!4f-9.086622940641973!5f0.7820865974627469", width="600", height="450")

Hier kann man komplexes und verschachteltes HTML schreiben, mit einem Bruchteil an Anschlägen die für HTML Tags nötig sind.

Pug als Templatesprache kann natürlich auch Variablen verarbeiten und Templatefragmente zusammenfügen, aber das kann man vernachlässigen.

Der riesen Vorteil gegenüber anderen Handlebar-Ähnlichen Templatesprachen ({{Var}}) ist: Kein HTML!

Die Pugsyntax kommt Textile relativ nahe, ist also sehr beschreibend. Kennt man sich mit HTML aus weiß man sofort worum es geht.

Leider gehen wiederum in Pug die Vorteile von Markdown etwas unter, nämlich die von Textbasierten Inhalten, da man sehr auf die korrekte Einrückung achten muss und reiner Text extra gekennzeichnet wird (siehe im Code Block | Einleitungstext oder die Doku)

Klingt so, als will ich die Eierlegende Wollmilchsau und die ist Pug mit seinen Filter.

Somit ist es möglich, z.B Coffee-Script (Vereinfache JavaScript Syntax) in seinem Pug-Template unterzubringen oder auch LESS für CSS und eben auch Markdown.


:markdown
    # Städte

h2(data-coords="50.075538, 14.4378") Prag

p.teaser 
    | Dies ist ein Einleitungstext

:markdown
    ### 3. Überschrift

    Mehr Text 

    Und Absätze

    ![](http://i.imgur.com/ZStdDkv.jpg)

    | Spalte 1 |   Spalte 2  |
    |----------|-------------|
    | Inhalt   | Mehr Inhalt |

div.map
    div.map-wrapper
        iframe(src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1473848775391!6m8!1m7!1sg1zfimSy-acAAAQZeVfhfw!2m2!1d50.07893751721421!2d14.4244816551045!3f175.48971657984794!4f-9.086622940641973!5f0.7820865974627469", width="600", height="450")

Parser in anderen Sprachen: https://github.com/pugjs/pug#additional-resources