Wir verwenden für viele Text-Elemente die Textauszeichnungssprache Textile. Gegenüber der direkten Formatierung über HTML hat dies den Vorteil, dass es nicht zu Fehlern innerhalb der Seitenstruktur kommen kann, weil z.B. ein schließendes HTML-Tag vergessen wurde.
Um die verfügbaren Formatierungen leichter verwendbar zu machen, werden die entsprechenden Eingabefelder mit diesem Menü ausgestattet:
Natürlich können Sie die Formatierungen auch direkt eingeben ohne das Menü zu bemühen. Bitte beachten Sie, dass es bei Blockformatierungen notwendig ist, eine Leerzeile nach dem betreffenden Absatz einzufügen, damit der Textile-Parser das Ende der Formatierung eindeutig feststellen kann.
Überschriften
Die Überschriften werden in Textile über h.
ausgezeichnet. n gibt hierbei die Ebene der Überschrift an. So würde h2.
eine Überschrift zweiten Grades erzeugen. Es handelt sich hierbei um eine Blockformatierung, die sich auf alle zusammenhängenden Zeilen auswirkt. Die Menüleiste bildet die Überschriften des ersten bis dritten Grades ab.
Absätze
Einzelne Absätze werden durch eine sie trennende Leerzeile erzeugt:
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Absätze lassen sich explizit durch voranstellen von p.
definieren. Wichtig ist hierbei immer, das die vorhergehende Zeile leer bleibt und vor dem folgenden Text ein Freizeichen bleibt:
p. Dies ist ein Absatz.
p. Dies ist ein weiterer Absatz.
Diese Notation bietet den Vorteil den Absätzen weitere Formatierungsanweisungen geben zu können.
Ausrichtung von Absätzen
Durch zusätzliche Zeichen zwischen dem p
und .
kann man die Ausrichtung bestimmen:
| zentriert |
| linksbündig |
| rechtsbündig |
| Blocksatz |
Beispiel:
p>. Dieser Text wird rechtsbündig dargestellt
p=. Dieser Text wird zentriert dargestellt
wird zu:
Dieser Text wird rechtsbündig dargestellt
Dieser Text wird zentriert dargestellt
Fließtextformatierung
Innerhalb eines Textblocks können Sie einzelne Wörter oder Textpassagen abweichend formatieren:
Um Wörter hervorzuheben, verwenden, schließen Sie diese mit einem Sternchen (Asterisk) ein
Beispiel:Ein Text mit *Hervorhebung*
wird zu:Ein Text mit Hervorhebung
Um Wörter kursiv schreiben, schließen Sie diese mit dem Unterstrich ein
Beispiel:Ein Text mit einem _kursiven_ Wort
wird zuEin Text mit einem kursiven Wort
Um die Durchstreichung zu nutzen, schließen sie die Wörter mit dem Bindestrich ein
Beispiel:Ein Text mit einem -durchgestrichenen- Wort
wird zuEin Text mit einem durchgestrichenen Wort
Aufzählungen
Es werden einfache Bulletpoints als auch nummerierte Aufzählungen unterstützt. Da es sich um ein Blockelement handelt schließen Sie die Aufzählung bitte mit einer Leerzeile ab.
Bulletpoints
Für einfache Bulletpoints stellen Sie den einzelnen Zeilen Ihrer Aufzählung ein Sternchen (Asterisk) voran gefolgt von einem Leerzeichen.
Beispiel:
* Zeile eins
* Zeile zwei
wird zu
Zeile eins
Zeile zwei
Nummerierte Aufzählungen
Analog dazu, wird für nummerierte Aufzählungen die Raute mit einem nachfolgenden Leerzeichen verwendet.
Beispiel:
# Zeile eins
# Zeile zwei
wird zu:
Zeile eins
Zeile zwei
Aufzählungspunkt mit Beschreibung
Wenn Sie zu einem Aufzählungspunkt noch einen erklärenden Text verfassen möchten, so machen Sie einen Zeilenumbruch und schreiben den Text ohne vorangestelltes Aufzählungssymbol.
Beispiel:
* Zeile eins
Ein erklärender Text, der auch über mehrere Zeilen gehen darf
* Zeile zwei
wird zu:
Zeile eins
Ein erklärender Text, der auch über mehrere Zeilen gehen darfZeile zwei
Links
Um auf andere Seiten zu verlinken, fügen Sie einfach die entsprechende URL ein. Wenn Sie den Link auf einen Text legen möchten so machen Sie dies bitte nach dem folgenden Schema:
"Link-Text":Link-URL
Beispiel:
"contentbird Convert":https://contentbird.io/contentbird-convert
wird zu:
Buttons
Um einen Button zu erhalten, der auf eine URL verweist, legt man einfach einen Link an, den man zusätzlich mit der entsprechenden "Klasse" auszeichnet.
Dies geschieht durch die in Klammern gestellte Klasse, welche direkt vor den Link-Text gestellt wird:
"(Klasse)Link-Text":Link-URL
Aktuell steht hier nur die Klasse buttonSponsor
zur Auswahl.
Beispiel:
"(buttonSponsor)contentbird Convert":https://contentbird.io/contentbird-convert
wird zu:
Kommentare
Mehrzeilige Kommentare werden durch bq.
und einem nachfolgenden Leerzeichen eingeleitet. Da es sich um ein Blockelement handelt müssen Sie als Abschluss eine Leerzeile einfügen.
Beispiel:
bq. Ein Text der auch über mehrere Zeilen gehen kann.
Diese Zeile gehört auch noch mit dazu.
wird zu
Ein Text der auch über mehrere Zeilen gehen kann.
Diese Zeile gehört auch noch mit dazu.
Bilder
Es können externe Bilder mit ihrer URL eingebunden werden. Dazu umlegt man diese mit zwei Ausrufezeichen:
!Bild-URL!
Im folgenden Beispiel soll das unter https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg erreichbare Bild eingebunden werden.
Beispiel:
!https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg!
wird zu
Bildtext (alt- und title-Attribut) hinzufügen
Ergänzend kann man das Bild um einen Text ergänzen. Diesen schreibt man in Klammern direkt hinter die URL:
!Bild-URL(Beschreibungstext)!
Beispiel:
!https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg(Machu Picchu)!
Bild verlinken
Es ist auch möglich, dass Bild zu verlinken. Hierzu schreibt man direkt hinter das zweite Ausrufezeichen die gewünschte Zieladresse.
!Bild-URL!:Link-URL
Beispiel:
!https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg!:https://de.wikipedia.org/wiki/Machu_Picchu
Bild ausrichten
Durch ergänzen eines <
, =
oder >
hinter dem ersten !
lässt sie das Bild, genau wie Absätze, horizontal ausrichten.
Beispiel (zentrieren):
!=https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg!
Bildoptionen kombinieren
Die Optionen lassen sich auch kombinieren. Um das Bild zu zentrieren und mit Text und Verlinkung auszustatten, würde man dann folgendes schreiben.
!=Bild-URL(Beschreibungstext)!:Link-URL
Beispiel:
!=https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/627px-Before_Machu_Picchu.jpg(Machu Picchu)!:https://de.wikipedia.org/wiki/Machu_Picchu
Vorschaufunktion
Um einen ersten Eindruck von der Formatierung des Textes zu erhalten, können Sie über das Menü die Vorschau aufrufen. Diese Funktion liegt auf dem Icon mit dem grünen Haken. Beachten Sie hierbei, dass die Formatierung des Textes mit dem Layout des contentbird Covert erfolgt und daher von der Darstellung in der endgültigen Einbindung abweichen kann.
Besondere Schlüsselwörter
Je nach Verwendung des Textes werden besondere Schlüsselwörter innerhalb des Textes verwendet um eine erweiterte Funktionalität bereit zu stellen.
[toggle]
Fügen Sie dies nach einem einleitenden Absatz innerhalb einer Grafik/Text-Kombination ein, um den nachfolgenden Text erst dann einzublenden, wenn der Nutzer einen entsprechendes Steuerelement angeklickt hat. Fügen Sie für die bessere Lesbarkeit eine Leerzeile vor und nach dem Schlüsselwort ein. Das Schlüsselwort kann nur einmal im Text verwendet werden.
(buttonSponsor)
Diese Auszeichnung wird einem Link in Auswertungstexten, beispielsweise im Quiz, vorangestellt und sorgt für eine Formatierung als Button. Es können mehrere Links entsprechend ausgezeichnet werden.
Der Aufbau ist wie folgt:
"(buttonSponsor)Link-Text":Link-URL
Beispiel:
"(buttonSponsor)zum Angebot":https://contentbird.io/contentbird-convert