• markdown
• typografie

Demo aller Markdown Features.

Überschriften

Hier wird klar: ein neuer Abschnitt beginnt. Die Überschrift ist prägnant und deutlich grösser als der Lauftext.

Und noch etwas kleinere Überschriften

Je länger ein Text, desto mehr Struktur benötigt er. Weitere Überschriften gliedern längere Abschnitte.

Sehr nützlich sind Listen, zum Beispiel eine Liste mit den verwendeten Schriften auf dieser Webseiten:

• Moderat Mono
• Feixen Sans

Zum Testen der typografischen Auszeichnung lässt sich in folgender Reihenfolge arbeiten:

1. Einen Text in Markdown schreiben. Dieser sollte möglichst alle Markdown und Markdown Extra Features enthalten.
2. Prüfen, welche Auszeichnungen noch verbessert werden sollten.
3. Farbe, Schrift und Abstände mit Hilfe von CSS Regeln definieren.

Die Stile müssen sowohl auf Mobile, als auch Desktop geprüft werden. Da diese Webseite auch ein Dark Theme hat, muss auch dies getestet werden.

Was ist eigentlich Markdown?

A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

— John Gruber, creator of Markdown ¹

Markdown unterstützt vor allem Überschriften und Auszeichnungen innerhalb von Fliesstexten. Fett, Kursiv, Code, Durchstreichung, Listen, etc. Werden weitere Features, wie Tabellen oder Fussnoten benötigt, muss Markdown Extra verwendet werden. Dies kann in der Kirby Config aktiviert werden.

Fussnoten

Fussnoten werden durch Markdown Extra erkannt und automatisch in einen Fussnoten-Block am Ende des Textes als nummerierte Liste ausgegeben.

Die Verweise im Text werden durch kleine Ziffern innerhalb von <sup> Elementen gekennzeichnet und erscheinen damit höhergestellt.

Tabellen

Mit Markdown Extra lassen sich auch Tabellen durch Text ausdrücken. Alternativ kann jederzeit auch reines HTML verwendet werden.

Abbildungen

Fotos, Illustrationen und Grafik lassen sich zusammen mit Bildlegenden auszeichnen. Zwar lassen sich Abbildungen mit Markdown auszeichnen, jedoch verwendet Kirby einen eigenen – durchaus einfacheren – Syntax, der die Bildlegende innerhalb eines figcaption Elements ausgibt.

Alternativ zum Kirby-Syntax für Bilder könnte man auch Markdown verwenden. Für Bildlegenden müsste man dann aber eine Konvention entwickeln. Zum Beispiel, dass die Bildlegende direkt an das Bild anschliesst, also ohne Leerzeile.

Im Beispiel oben sollte eigentlich eine Bildlegende erscheinen. Leider scheint Kirby diesen Markdown Standard nicht zu unterstützen und verwendet den eigenen Syntax.²

Zitate

Einfache Zitate, oder auch blockquote genannt, lassen sich mit Markdown einfach durch ein > auszeichnen. Allerdings fehlt die Möglichkeit korrekte Angaben zur Quelle oder Autor zu machen.

Als Zwischenlösung verwendet diese Webseite die Kombination aus zwei direkt aufeinanderfolgenden Zitat-Blöcken. Wichtig ist eine Leerzeile zwischen den Blöcken. Idealerweise wird die Quelle von einem <cite></cite> HTML Tag umschlossen. Das Styling ist entsprechend angepasst und Fussnoten funktionieren dort auch gut.

A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

— John Gruber, creator of Markdown ¹