Simplenote mit Markdown zur Verbesserung des kreativen Workflows für WordPress
Wäre es nicht super, wenn es ein Tool gäbe, das es dir erlauben würde auch unterwegs mal eben deinen nächsten Blogartikel zu entwerfen?
Während du im Café sitzt, mal schnell ein paar Sätze ins Handy zu tippen oder im Zug ins Tablet? Und dann auch gleich die Formatierung einzustellen, so dass dein Text strukturiert ist?
Und zu guter Letzt, den frisch erstellten Inhalt direkt in WordPress hochzuladen um ihn als neuen Artikel zu veröffentlichen?
Tja, so ein Tool gibt es tatsächlich!
Es heißt Simplenote und wurde von Automattic, der Firma hinter WordPress entwickelt.
Eigentlich ist die Anwendung als simpler Notizblock gedacht. Sowas, in das du deine Einkaufsliste für den Supermarkt reinschreibst. Bei Simplenote werden die Informationen nicht auf Papier sondern in der Cloud gespeichert und zwar verschlüsselt, wie sich heutzutage eigentlich von selbst versteht.
Mit Simplenote Ideen in Inhalte umwandeln und in WordPress veröffentlichen
Da es neben einem Windows-Client auch eine Web-Oberfläche für Simplenote und zusätzliche Apps bzw. Clients für Android, iOS, iMac und Linux gibt, kann man mit nahezu allen geläufigen Geräten auf seine Notizen zugreifen.
Dazu kommt, was ich sehr sympathisch finde, die Schlichtheit der Anwendung. Denn viel mehr als eine Notiz nach der anderen anlegen kann man auf den ersten Blick nicht machen.
Man fügt eine neue Notiz hinzu erhält so im Laufe der Zeit eine Liste von Notizen. Was man von anderen Notizblöcken kennt, das Anlegen von Ordnern oder das Einteilen in Kategorien, fehlt beim Simplenote völlig.
Zum Glück! Denn so bleibt das Notizbuch einfach in seiner Struktur und Handhabung.
Schreiben, wo immer du gerade bist, egal mit welchem Gerät
„Moment mal!“, wirst du jetzt sagen. Ein simpler Notizblock mit Clients für verschiedene Betriebssysteme ist jetzt so noch nichts besonderes.
Das stimmt, aber was den Simplenote-Notizblock auszeichnet sind ein zwei Features, die ihn inbesondere für die Zusammenarbeit mit WordPress interessant machen.
Eines davon ist die Möglichkeit den Text in WordPress zu veröffentlichen. Dies geschieht entweder über die entsprechende Funktion in der Smartphone App, oder durch simples copy-and-paste.
Die zweite und weitaus wichtigere Eigenschaft den Text mittels Markdown zu formatieren, und dass der Gutenberg-Editor den eingefügten Text automatisch korrekt interpretiert und die entsprechend passenden Blöcke zur Verfügung stellt!
Was ist Markdown?
Markdown ist eine sehr einfache Auszeichnungssprache, die es dir ermöglicht einen Text optisch zu strukturieren und zu formatieren. Dazu musst du zu keiner Zeit zur Maus greifen, etwa um eine Überschrift einzufügen. Es genügt, dass du bestimmte Sonderzeichen verwendest, um den Text auszuzeichnen. Simplenote verfügt über einen Preview Modus, mit dem du dir eine Vorschau des Textes betrachten kannst.
Die Textauszeichnungen sind simpel, leicht zu merken und bestehen ausschließlich aus Sonderzeichen, die du auf deiner Tastatur findest. Etwa ‚**‘ vor und hinter dem Wort, um dieses, wie hier *Doppel-Stern* fett darzustellen.
Im Gegensatz zu HTML ist der Umfang der Markdown-Syntax minimal. Vor allem aber ist diese Syntax bei weitem einfacher aufgebaut und schnell gelernt. Das schauen wir uns jetzt mal zusammen mit ein paar Beispielen an.
Markdown-Syntax
Markdown stellt genau die Formatierungsmöglichkeiten zur Verfügung, wie sie in 99% aller WordPress-Texte benötigt werden dürften:
- Überschrift
- Absatz
- Zitat
- Liste
- Code
- Link
- Bild
- Schriftschnitt: fett oder kursiv
Betrachten wir diese Bestandteile im einzelnen:
Überschrift
Eine Überschrift wird durch das Rautensymbol # definiert. Die Anzahl der Symbole vor dem Text bestimmen die Größe der Überschrift. Also en ergibt H1, zwei ergeben H2 usw.
Beispiel:
# Überschrift 1
## Überschrift 2
### Überschrift 3
ergäbe:
Überschrift 1
Überschrift 2
Überschrift 3
Absatz
Ein Absatz wird durch zwei Zeilenumbrüche mit einem Leerzeichen dazwischen erstellt. Also am Ende der Zeile bzw. der gewünschten Stelle auf die Enter-Taste drücken.
Dann ein Leerzeichen einfügen und noch einmal auf die Enter-Taste drücken und schon hast du einen neuen Absatz, der auch vom Gutenberg-Editor korrekt als zwei Absatz-Blöcke interpretiert wird.
Zitat
Ein Zitat erstellst du mit dem „größer-als“-Zeichen: >
Aus einem Text der Art:
> Dies ist ein Zitat und schlauer Spruch
wird
Dies ist ein Zitat und schlauer Spruch
Listen
Listen erstellt man indem man vor den Listeneintrag einen Stern * setzt, wenn man eine einfache Aufzählung haben will:
* Punkt 1
* Punkt 2
* Punkt 3
- Punkt 1
- Punkt 2
- Punkt 3
oder indem man die Listenpunkte numeriert, wenn man eine geordnete Liste bevorzugt:
1. Punkt 1
2. Punkt 2
3. Punkt 3
- Punkt 1
- Punkt 2
- Punkt 3
Indem man vor den jeweiligen Listenpunkt noch ein Leerzeichen einfügt kann man Unterpunkte erzeugen.
- Punkt 1
- Punkt 2
- Punkt 3
Links
Einen Link fügt kann man in seinen Text ganz einfach so ein. Man schreibt den Text des Links in eckige Klammern, gefolgt von der URL in runden Klammern.
Grundform: [Linktext](URL)
Beispiel:
[Goldpilz](https://www.goldpilz.de) würde also zu: Goldpilz
umgewandelt werden:
Du kannst auch noch einen Link-Titel dahinter schreiben, der, wenn man mit der Maus drüber fährt, angezeigt wird.
Grundform: [Linktext](URL) „Titel“
Links als Liste:
Eine weitere nützliche Methode ist es, die Links nicht direkt im Text einzubauen sondern unten drunter und im Text nur zu referenzieren. Dadurch bleibt die Lesbarkeit des Textes erhalten.
Beispiel:
Besuche doch mal die Webseiten [Amazing Temples][1] oder
[Das beste Buch der Welt][2] oder bleibe hier bei [Goldpilz][3].
[1]: https://AmazingTemples.com/ "Amazing Temples"
[2]: https://DasBestBuchDerWelt.de/ "Das beste Buch der Welt"
[3]: https://goldpilz.de/ "Goldpilz"
Ergibt:
Besuche doch mal AmazingTemples oder
Das beste Buch der Welt oder bleibe hier bei Goldpilz.
Bilder
Auch Bilder kann man in seinen Text einfügen. Dazu wird ähnlich wie bei einem einfachen Link vorgegangen. Die Form ist dabei, ein Ausrufezeichen, gefolgt vom Alt-Text des Bildes in eckigen Klammern, gefolgt von der URL zu dem Bild. Dabei kannst du theoretisch auch ein Bild von deiner Festplatte verwenden, aber wenn du es im Internet nutzen willst sollte die Grafik über eine URL im Internet erreichbar sein:
Die Grundform:
Beispiel:
ergibt:
Schriftschnitt – fett und kursiv
Den Schriftschnitt zu ändern ist denkbar einfach:
Einfachsterne * vor und hinter dem betroffenen Textteil formatieren diesen kursiv.
Doppelsterne ** vor und hinter dem betroffenen Textteil formatieren diesen fett.
Dreifachsterne *** vor und hinter dem betroffenen Textteil formatieren diesen fett und kursiv.
Also:
*kursiv* ergibt kursiv
**fett** ergibt fett
***fett und kursiv*** ergibt fett und kursiv
Code
Code kann man inline durch den rückwärtsgewanden Apostroph kennzeichnen, der sich auf der deutschen Tastatur rechts vom Eszett findet, auch scharfes S genannt):
Will man Textteile als Code verstanden wissen, dann schließt man diesen also mit diesen Apostrophen ein:
`#button {border: none;}` .
Einen ganzen Block mit Code erhält man, wenn man die Codezeilen mittels Tabulator einrückt (oder vier Leerzeilen vor jede Codezeile setzt:
#button {
border: none;
}Inhalt in WordPress veröffentlichen
Nichts geht einfacher. Nachdem du den Text fertig gestellt hast markierst und kopierst du ihn in Simplenote und fügst ihn in WordPress in den ersten Absatz eines neuen Beitrags ein.
Ich habe diesen Text hier, bis auf den Teil ab „Fazit“ in Simplenote geschrieben und deshalb mache ich das jetzt auch mal….Sekunde…. kopieren und einfügen…
Voilá!!!
Hat gut funktioniert. Lediglich den Seitentitel musste ich noch manuell kopieren, ansonsten sieht das Dokument jetzt genauso aus, wie ich es erwartet habe und wie du es hier vor dir siehst.
Fazit
Wer einen einfachen Editor zum Erstellen seiner WordPress-Texte sucht, der ist mit Simplenote bestens bedient, vor allem, wenn er unabhängig vom Ort und Gerät an dem Text arbeiten will. Durch die Verwendung der Auszeichnungssprache Markdown kann der Text eine Pseudoformatierung erhalten, die später korrekt vom Gutenberg-Editor interpretiert wird. Jeder Absatz aus dem Simplenote-Dokument, wird beim Kopieren in einen passenden Block umgewandelt. Auch Bilder, Links oder Code werden exakt so behandelt, wie man es erwarten sollte. Und wenn wieder erwarten etwas nicht passen sollte, dann kann man nachträglich ja auch noch im Gutenberg-Editor entsprechende Korrekturen vornehmen. Wenn man aber bereits in Simplenote sauber gearbeitet hat, dann sollte das nicht mehr notwenig sein.
Links
Meine Beschreibung der Markdown-Syntax ist nicht vollständig. Es gibt noch ein paar Optionen oder Varianten mehr. Deshalb hier der Link zur Markdown-Syntax bei Wikipedia.
Wenn du Simplenote selber ausprobieren willst, dann kannst du es hier herunterladen: Simplenote bei Automattic.
