Markdown-Hacks, die ich sonst immer wieder googlen muss...

Ich liebe es in Markdown zu schreiben. Meistens reicht es ja, die wichtigsten Dinge zu wissen (also: Strukturierung der Inhalte per hashtag #, Verlinkungen mit Websites, das Einbinden von Bildern.

Doch es gibt auch immer wieder Sonderfälle und dann beginnt das Googlen (und ratzfatz, sind wieder einige Stunden weg…).

In dieser kleinen ständig aktualisierten Liste sammle ich meine Fundstücke, damit ich nicht immer suchen muss.

Nun kommt es darauf an, in welchem Markdown Sie unterwegs sind. Also schon mal die Vorwarnung, dass das nicht überall funktionieren wird (zur Sicherheit habe ich mal dazu geschrieben, wann/wo es bei mir nicht funktonierte).

Die Liste lebt und ich würde mich freuen, wenn Ihr auch Tipps habt. Sagt Bescheid.

 ____  _        _               _                                            
|  _ \(_) ___  | |__   ___  ___| |_ ___ _ __                                 
| | | | |/ _ \ | '_ \ / _ \/ __| __/ _ \ '_ \                                
| |_| | |  __/ | |_) |  __/\__ \ ||  __/ | | |                               
|____/|_|\___| |_.__/ \___||___/\__\___|_| |_|                               
 __  __            _       _                       _                _        
|  \/  | __ _ _ __| | ____| | _____      ___ __   | |__   __ _  ___| | _____ 
| |\/| |/ _` | '__| |/ / _` |/ _ \ \ /\ / / '_ \  | '_ \ / _` |/ __| |/ / __|
| |  | | (_| | |  |   < (_| | (_) \ V  V /| | | | | | | | (_| | (__|   <\__ \
|_|  |_|\__,_|_|  |_|\_\__,_|\___/ \_/\_/ |_| |_| |_| |_|\__,_|\___|_|\_\___/

   _   _   _                                            
  / \ / \ / \                                           
 ( v | o | n )                                          
  \_/ \_/ \_/                                           
   _   _   _   _   _   _     _   _   _   _   _   _   _  
  / \ / \ / \ / \ / \ / \   / \ / \ / \ / \ / \ / \ / \ 
 ( R | e | i | n | e | r ) ( G | ä | r | t | n | e | r )
  \_/ \_/ \_/ \_/ \_/ \_/   \_/ \_/ \_/ \_/ \_/ \_/ \_/ 

Okay, das benutze ich nicht ständig, aber weil ASCII-Art immer nett anzusehen ist, kommt sie hier an erster Stelle. Das hier oben habe ich mit diesem ASCII-Generator erstellt. Markdown kommt allerdings nicht damit zurecht, wenn die Textkunst einfach so ins Dokument gekippt wird. Markdown lässt sich aber austricksen, wenn man jeweils 4 Leerstellen voranstellt…. Okay, das benutze ich nicht ständig, aber weil ASCII-Art immer nett anzusehen ist, kommt sie hier an erster Stelle. Das hier oben habe ich mit diesem ASCII-Generator erstellt. Markdown kommt allerdings nicht damit zurecht, wenn die Textkunst einfach so ins Dokument gekippt wird. Markdown lässt sich aber austricksen, wenn man jeweils 4 Leerstellen voranstellt….

Ich würde gerne hin und wieder auch Bilder anzeigen, aber gerne auch mittig. So wie hier:

="https://www.reinergaertner.de/austausch/b2bSOME_4c_250-VooXWgtjZZ/b2bSOME_4c_250.png" style="max-width:100%;height:auto;">

Und ein Claim, auch mittig

Was man hier im Git nicht sieht, dass das Bild in der Mitte steht. Ok. das ist html und gepfuscht. Aber egal. Hauptsache, es geht.

Für Marked App muss ich das Logo im SVG-Format wählen. Ansonsten funktoniert die PDF-Ausgabe nicht:

="https://www.reinergaertner.de/austausch/b2bSOME_4c_250-WHAxlQ0LNg/b2bSOME_4c_250.svg" style="max-width:100%;height:auto;" width="200" height="124"/>

Das geht dann so:

1
2
3
<p align="center">
  <img src="https://www.reinergaertner.de/austausch/b2bSOME_4c_250-WHAxlQ0LNg/b2bSOME_4c_250.svg" width="200" height="124"/>
  </p>  

Manchmal will ich zu einem Abschnitt auf dieser Seite verlinken. Das geht (leider nicht hier, sondern nur in Github und co.) so:

Link zum Abschnitt “Mehrzeilige Kommentare“

Achtung: Das geht nur wenn

  • Absatzüberschriften, die aus mehreren Worten bestehen, werden mit einem Bindestrich verbunden
  • das Linkziel muss klein geschrieben werden (deswegen hat es ewig nicht geklappt bei mir)

Also so:

[Link zum Abschnitt “Mehrzeilige Kommentare“](#mehrzeilige-kommentare-anzeigen)

Letztendlich funktioniert das so wie bei den Links zu den URLs, nur kommt zusätzlich noch ein “!“ vor die eckige Klammer:

![link-text](http://example.com/image.jpg)

Etwas komplizierter wird es bei “nested links“:

[![alt text](image.jpg)](https://example.com)

Bei Kommentaren muss man eine weitere Zeile einziehen. In diesem Beispiel hat das nicht geklappt:

Erste Zeile Zweite Zeile

Eigentlich sieht das markdown doch gut aus, oder?

1
2
> Erste Zeile
> Zweite Zeile

So sieht es wie gewollt aus:

Erste Zeile

Zweite Zeile

Der Unterschied liegt in der Leerzeile dazwischen:

1
2
3
> Erste Zeile

> Zweite Zeile

Manchmal will man noch einen Kommentar. Das ist zum Beispiel dann sinnvoll, wenn man auf einen bestehenden Kommentar antworten will. Das geht so:

Ein erster Kommentar

Und hier der Senf dazu

So sieht es dann im “Code“ aus:

1
2
3
> Ein erster Kommentar

>> Und hier der Senf dazu

So entstehen wohsortierte Listen. Der Punkt “hier geht es weiter“ wird mit einem TAB eingerückt, dann passt es:

  1. ein Absatz

    hier geht es weiter

  2. noch ein Absatz

  3. noch einer

    weiterer Absatz

1
2
3
4
5
6
7
8
9
1. ein Absatz

    hier geht es weiter
    
2. noch ein Absatz
3. noch einer

    weiterer Absatz
    

An einigen Stellen lassen sich auch gut Aufgaben platzieren. Dabei kann man auch bereits erledigte Aufgaben unkompliziert mit einem “x“ in der eckigen Klammer anzeigen.

[ ] Mercury

[x] Venus

[x] Earth (Orbit/Moon)

[x] Mars

[ ] Jupiter

[ ] Saturn

Leider geht das nicht überall. Hier könnte Unicode helfen - siehe auch:

⍻ NOT CHECK MARK

☑ BALLOT BOX WITH CHECK

✅ WHITE HEAVY CHECK MARK

✓ CHECK MARK

✔ HEAVY CHECK MARK

🗸 LIGHT CHECK MARK

🗹 BALLOT BOX WITH BOLD CHECK

◯ LARGE CIRCLE

⭕ HEAVY LARGE CIRCLE

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
&#x237B; NOT CHECK MARK

&#x2611; BALLOT BOX WITH CHECK

&#x2705; WHITE HEAVY CHECK MARK

&#x2713; CHECK MARK

&#x2714; HEAVY CHECK MARK

&#x1F5F8; LIGHT CHECK MARK

&#x1F5F9; BALLOT BOX WITH BOLD CHECK

&#x25EF; LARGE CIRCLE

&#x2B55; HEAVY LARGE CIRCLE

Eigentlich bin ich kein Freund von Emojis. Da es aber so schwierig ist, farblich etwas zu markieren, könnte man auch mit Emojis spielen. Das geht ganz einfach:

Roter Apfel (🍎)

Roter Apfel (&#x1F34E;)

Eine gute Übersicht der Emojis inklusive der Shortcodes gibt es hier: Emoji Unicode Tables

In der Übersicht steht auch, dass das Emoji in verschiedenen Diensten anders aussehen wird.

Leider ist die Eingabe hier in markdown nicht besonders intutitiv - Beispiel:

Der Code für das Emoji “airplane” ist laut Emoji-Tabelle “U+2708”. Damit das hier (✈) angezeigt wird, muss es so verändert werden:

  • Das “U+” entfernen und durch “&#x” ersetzen. Dann muss noch ein Semikolon dahinter.

aus “U+2708“ wird also &#x2708;

Muss man halt einmal wissen.

Nicht überall, aber in GitHub funktionioert es, wenn der Emoji-Name aus der Liste oben zwischen jeweils einem Doppelpunkt steht:

:honeybee:

:honeybee:

Manchmal will man Sonderzeichen, die markdown benutzt, anzeigen. Das geht mit einem “Backslash“: \

ein Test

* ein Test *

Die Sterne werden so angezeigt:

\* ein Test \*

Das geht natürlich mit fett. Aber manchmal will ich im fetten Teil noch etwas stärker herausheben, vielleicht in kursiv. Ich brauche also etwas fettes und kursives:

Dieser Text ist sehr wichtig.

**Dieser Text ist _sehr_ wichtig.**

Das geht eigentlich auch ganz einfach mit zwei vorangestellten Tilden: durchgestrichen!

Das geht eigentlich auch ganz einfach mit zwei vorangestellten Tilden: ~~durchgestrichen~~!

Hier kommt es ein wenig auf das verwendete Markdown an

Im meinem cms (Grav CMS) geht es nichtund auch bei Gitpitch kann ich die Textfarbe so verändern:


Some Markdown text with <span style="color:#fffffff">some *white* text</span>.

Bei Github und co. geht das leider nicht. Um etwas farblich herauszuarbeiten könnte man mit “diff“ arbeiten. Aber das ist nicht besonders elegant, das “-“ und das “+“ bleiben natürlich.

1
2
+ this text is highlighted in green
- this text is highlighted in red

Leider geht das nicht be GitHub und co. (aber in meinem Markdown-CMS) - also ausprobieren:

Text in roter Textfarbe

<font color=red>Text in roter Textfarbe</font>

und dann reicht mir noch der gelbe Textmarker!

und dann reicht mir noch der <span style="background-color:#FFFF00">gelbe Textmarker!</span>

Das funktioniert in GitHub und co und auch bei mir im Grav-CMS

Ein Text in einem Kasten

<table><tr><td>Ein Text in einem Kasten</td></tr></table>

So lässt sich Text weiter strukturieren. Insbesondere, wenn die Seite übersichtlich bleiben will. Lediglich der angezeigte Kasten sieht etwas komisch aus, wenn man auf den Pfeil klickt:

Klicken Sie hier, um mehr zu lesenHier kann nun ein beliebiger Text stehen, der sogar **markdown** enthalten kann.

In Markdown sieht es so aus:

1
2
3
4
<details>
  <summary>Klicken Sie hier, um mehr zu lesen</summary>
  Hier kann nun ein beliebiger Text stehen, der sogar **markdown** enthalten kann.
</details>

Das ist natürlich ein ganz spezielles Thema. Ich werde dazu mal mehr schreiben. Nur so viel:

  • Tabellen lassen sich gut mit dem “Markdown Tablemaker” erstellen. Nachteil: Das wird auf dem Server generiert und nicht gespeichert.
  • Der — für mich beste Markdown-Editor — der hervorragend mit Tabellen umgehen kann, ist Typora (momentan noch kostenlos)
  • Wer viel mit Tabellen arbeitet, sollte sich Tableflip anschauen. Kostet nicht viel {19 Euro), was macht es soll.
  • Wer Google Tabellen und Chrome benutzt, sollte sich unbedingt die Extension “Markdown Tablemaker” anschauen. Damit lassen sich aus jeder Google-Tabelle Markdowntabellen erstellen. Mein Favorit für umfangreichere Tabellen, die man vorher sortieren muss (das ist in der Tableflip app mühsamer).