Um einen Absatz in TiddlyWiki zu erzeugen sind 2 Zeilenumbrüche nötig.

Das ist der erste Absatz

Das ist der zweite Abastz, getrennt durch 2 Zeilenumbrüche.

Ein Zeilenumbruch wird nicht dargestellt, kann aber im Tiddler Text verwendet werden.

Das ist ein Absatz,
zusammengesetzt aus
mehreren Zeilen 

Dargestellt als:

Das ist ein Absatz, zusammengesetzt aus mehreren Zeilen

Erzeugter HTML Code:

<p>Das ist ein Absatz,
zusammengesetzt aus
mehreren Zeilen 
</p>

Für Situationen, wo ein "harter" Zeilenumbruch benötigt wird sehen sie: Zeilenumbruch in WikiText.

Bild Formatierung

Bilder können in WikiText mit folgender Syntax verwendet werden:

[img[Motovun Jack.jpg]]

oder

[img[https://tiddlywiki.com/favicon.ico]]  Dieses verlinkte Bild wird eventuell nicht angezeigt, wenn Sie offline sind!

Wenn die Bildquelle der Titel eines existierenden Tiddlers ist, dann wird dieser direkt angezeigt. Ansonsten wird die Quelle als URL angesehen und ein HTML <img> Element wird erzeugt. Das src Attribut wird auf die URL gesetzt.

Ein Tooltip kann ebenfalls angegeben werden:

[img[Ich bin der Tooltip text|Motovun Jack.jpg]]

Attribute wie z.B: CSS Klassen oder die Höhe und Breite können ebenfalls angegeben werden.

[img width=64 [Motovun Jack.jpg]]
[img width=64 class="tc-image" [Motovun Jack.jpg]]

Anmerkung: Attribute können auch über Transklusionen oder Variablen referenziert werden:

[img width={{!!mywidth}} class=<<image-classes>> [Motovun Jack.jpg]]

Die "Bilder Syntax" ist eine Vereinfachung für die Verwendung des "ImageWidget"

Anzeige von Bildern mit Transklusion

Sie können ein Bild, das als Tiddler gespeichert ist direkt anzeigen. Nachteil dieser Methode ist, dass die Größe des Bildes nicht direkt beeinflusst werden kann.

{{Motovun Jack.jpg}}

Dargestellt als:

Sie können ein dreifaches Gravis Akzent Zeichen: ``` verwenden. Im englischen wird es auch als "backtick" bezeichnet.

Text Beispiel:

```
Das wird als nicht proportionaler Text dargestellt.
```

Die drei "backticks" müssen am Anfang der Zeile stehen und es dürfen keine Leerzeichen folgen, sonst kann der Block nicht korrekt dargestellt werden.

Dargestellt als:

Das wird als nicht proportionaler Text dargestellt.

Anmerkung:

Bei einigen Tastatur Anordnungen (je nach Betriebssystem und Sprache) können diese Zeichen als tote Taste konfiguriert sein, was sie schwerer zu tippen macht.

Für einen mehrzeiligen Code-Block tippen Sie einfach 6 mal auf das Akzent Zeichen, stellen den Cursor in die Mitte, tippen [Enter] und fertig.

Für ein einfaches Akzent Zeichen drücken Sie Gravis und ein Leerzeichen.

TODO some short videos, and upload my own Keyboard settings

HTML Definitionslisten werden wie folgt erstellt:

; Term der zu definieren ist
: Definition dieses Terms
; Neuer Term
: Neue Definition

Dargestellt als:

Term der zu definieren ist

Definition dieses Terms

Neuer Term

Neue Definition

Erzeugter HTML Code:

<dl><dt>Term der zu definieren ist</dt><dd>Definition dieses Terms</dd><dt>Neuer Term</dt><dd>Neue Definition</dd></dl>

Mögliche Zeichen Formatierungen sind:

Siehe auch: Code Block in WikiText

Der Halbgeviertstrich, englisch "n-dash", kann mit 2 "minus" Zeichen erzeugt werden. -- ergibt: –

Der Geviertstrich, englisch "m-dash", wird mit 3 "minus" Zeichen erzeugt: --- ergibt: —

Für geübte Anwender! Neue Besucher bitte Transclusion in WikiText und Makros in WikiText zuerst lesen!

HTML Elemente und Kommentare können direkt in WikiText verwendet werden. Beispiel:

<article class="hello">
Dies ist ein einfacher Block Text: Hallo! 
<!-- Dieser Kommentar wird in der Ausgabe nicht enthalten sein! -->
</article>

Dargestellt als:

Attribute

Attribute in HTML können als Transklusion oder als Makro eingebunden werden. Zum Beispiel, wird hier das href Attribut als Wert des Tiddlers "MeinLinkZiel" verwendet:

<a href={{MeinLinkZiel}}>link</a>

Hier wird das Attribut über einen Makro Aufruf definiert:

<a href=<<MeinMakro "Brian">>>link</a>

Text Attribute können Zeilenumbrüche enthalten. In der Ausgabe werden diese jedoch wie in HTML üblich ignoriert! Folgendes Beispiel erzeugt ein unsichtbares html div element das nur mit Entwickler Werkzeugen sichtbar ist.

<div data-address="Mouse House,
Mouse Lane,
Rodentville,
Ratland."/>

Wenn Sie 3 doppelte Anführungszeichen am Beginn verwenden, dann kann der Text einfache Anführungszeichen enthalten.

<div data-address="""Mouse House,
"Mouse" Lane,
Rodentville,
Ratland."""/>

HTML Code Verarbeitung

Der Inhalt von HTML Elementen wird im "Inline" Modus verarbeitet.
Außer, wenn auf das Eröffnungselement 2 Zeilenumbrüche folgen, dann ist der Block Modus aktiv.

Inline Modus

Es weden nur Zeichen Formatierungen wie: fett, hochgestellt usw. erkannt. Der Inhalt von Block Elementen, wie zB: Tabellen, Listen und Überschriften wird nicht korrekt übersetzt.

Ungeordnete Listen

Ungeordnete Listen können mit dem Stern * erzeugt werden. Der * muss das erste Zeichen in der Zeile sein!

* Erstes Listen Element
* Zweites Listen Element
** Ein Unterelement
* Drittes Listen Element

Dargestellt als:

• Erstes Listen Element
• Zweites Listen Element
  • Ein Unterelement
• Drittes Listen Element

Erzeugter HTML Code:

<ul><li>Erstes Listen Element</li><li>Zweites Listen Element<ul><li>Ein Unterelement</li></ul></li><li>Drittes Listen Element</li></ul>

Geordnete Listen

Geordnete Listen verwenden das "Hash" Zeichen: #

1. Erstes Element
2. Zweites Element
3. Drittes Element

Ungeordnete und geordnete Listen können gemischt werden:

* Heute zu erledigen
*# Essen
* Arbeit abschieben :)
*# Dieses und 
*# Jenes 
*## und das auch noch

Dargestellt als:

• Heute zu erledigen
  1. Essen
• Arbeit abschieben :)
  1. Dieses und
  2. Jenes
     1. und das auch noch

Erzeugter HTML Code:

<ul><li>Heute zu erledigen<ol><li>Essen</li></ol></li><li>Arbeit abschieben :)<ol><li>Dieses und </li><li>Jenes <ol><li>und das auch noch</li></ol></li></ol></li></ul>

Listen und Zitate mischen

Hinweis: Zitate und Listen lassen sich hervorragend gemeinsam einsetzen:

* Element Eins
** Element Zwei
**> Ein Zitat
**> Noch ein Zitat
* Element Drei

Dargestellt als:

• Element Eins
  • Element Zwei

    Ein Zitat

    Noch ein Zitat

• Element Drei

Erzeugter HTML Code:

<ul><li>Element Eins<ul><li>Element Zwei<blockquote><div>Ein Zitat</div><div>Noch ein Zitat</div></blockquote></li></ul></li><li>Element Drei</li></ul>

CSS Klassen

Für geübte Anwender! Sie können CSS Klassen direkt zuweisen:

* Element Eins
*.MyClass Element 2
* Element 3

Dargestellt als:

• Element Eins
• Element 2
• Element 3

Erzeugter HTML Code:

<ul><li>Element Eins</li><li class="MyClass">Element 2</li><li>Element 3</li></ul>

Makros definieren

Für die Ungeduldigen

Makros sind Text Bausteine, die an beliebiger Stelle aufgerufen / eingefügt werden können. Eine Makro Definition kann zum Beispiel so aussehen und muss am Anfang eines Tiddlers eingefügt werden:

\define meinErstesMakro(name:"Bugs Bunny",adresse:"Rabbit Hole Hill")
Hallo, Ich bin $name$ und lebe in $adresse$
\end

Der Aufruf erfolgt mit:

Es erzeugt folgenden Text: ''<<meinErstesMakro>>''

Es erzeugt folgenden Text: Hallo, Ich bin Bugs Bunny und lebe in Rabbit Hole Hill

Was genau passiert hier?

Die erste Zeile der Definition startet mit: \define und enthält:

• Den Makro Namen: meinErstesMakro
• Die Parameter Namen: name und adresse
• Die Standard Werte: Bugs Bunny und Rabbit Hole Hill

Parameter sollten immer sinnvolle Standard Werte haben, da es die Verwendung erleichtert.

Die letzte Zeile des Makros ist \end und markiert das Ende eines Makros :)

Der Bereich zwischen \define und \end wird als Makro Code bezeichnet. In diesem Bereich können die Makro Parameter mit $name$ bzw $adresse$ als Platzhalter verwendet werden.

Wie im Beispiel ersichtlich: Hallo, Ich bin $name$ und lebe in $adresse$

Einzeilige Makros

Für einzeilige Makros kann die \end Markierung entfallen!

\define meinZweitesMakro(name:"Bugs Bunny") Hallo, Ich bin $name$

Makro Regeln

• Makro Definitionen müssen am Anfang des Tiddlers eingefügt werden.
• Makros sind nur in dem Tiddler sichtbar der sie definiert.
• Tiddler die mit Transklusion eingefügt werden können definierte Makros sehen, jedoch nicht selber mitbringen!

Globale Makros

• Globale Makros können in Tiddlern definiert werden, die mit dem System Tag: $:/tags/Macro getaggt sind. Diese Makros sind in jedem Tiddler sichtbar.
• JavaScript Macros sind global sichtbar und haben Zugriff auf die TW Kern Funktionen.
• Makros können mit dem ImportVariablesWidget importiert werden. (Für geübte Anwender)

Makros verwenden

<<meinErstesMakro>>
<<meinErstesMakro "Donald Duck">>
<<meinErstesMakro "Mickey Mouse" "Mouse House">>

Dargestellt als:

Hallo, Ich bin Bugs Bunny und lebe in Rabbit Hole Hill

Hallo, Ich bin Donald Duck und lebe in Rabbit Hole Hill

Hallo, Ich bin Mickey Mouse und lebe in Mouse House

Wie wir sehen können, werden die Parameter in der Reihenfolge übernommen, in der sie definiert wurden: name, adresse. Da Makros jedoch viele Parameter haben können und es passieren kann, dass wir nur den Zweiten ändern möchten können Parameter auch benannt übergeben werden.

<<meinZweitesMakro adresse:"Dufftown">>

Hallo, Ich bin Mario und würde gerne mal wieder nach Dufftown fahren:)

Mehrzeilige Parameter beim Aufruf

Makros können mit mehrzeiligen Parametern aufgerufen werden, wenn sie in Anführungsstriche gesetzt werden:

<<meinErstesMakro "Mickey Mouse" "Mouse House,
Mouse Lane,
Rodentville,
Ratland.">>

Wenn Sie 3 doppelte Anführungszeichen verwenden, dann können die Parameter einfache Anführungszeichen enthalten:

<<meinErstesMakro "Mickey Mouse" """Mouse House,
"Mouse" Lane,
Rodentville,
Ratland.""">>

Nur für geübte Anwender! Sie können folgende Konstruktion verwenden um verschiedenen Elementen direkt CSS Klassen zuzuweisen.

@@.myStyle
* Listen Element Eins
* Listen Element Zwei
@@

Dargestellt als:

• Listen Element Eins
• Listen Element Zwei

Erzeugter HTML Code:

<ul class="myStyle"><li>Listen Element Eins</li><li>Listen Element Zwei</li></ul>

Eine ähnliche Syntax wird verwendet, um das "style" Attribut direkt zu definieren:

@@background-color:red;
* Listen Element Eins
* Listen Element Zwei
@@

Dargestellt als:

• Listen Element Eins
• Listen Element Zwei

Erzeugter HTML Code:

<ul style="background-color:red;"><li>Listen Element Eins</li><li>Listen Element Zwei</li></ul>

Mehrere Stile und Klassen gleichzeitig angewendet:

@@.tc-tiddler-frame
@@width:400px;
Test Text, Test Text, 
@@

Dargestellt als:

Test Text, Test Text,

Erzeugter HTML Code:

<p class="tc-tiddler-frame" style="width:400px;">Test Text, Test Text, 
</p>

Basis Info

TiddlyWiki formatiert Tabellen mit dem "Pipe" | Zeichen:

|Zelle 1 |Zelle 2|h
|Zelle 2 |Zelle 4|

|Zelle 1 |!Zelle 2|
|Zelle 2 |Zelle 4|

Der h Parameter nach der ersten Zeile definiert die Reihe als Kopfzeile. Alternativ können einzelne Zellen mit einem Rufzeichen ! hervorgehoben werden.

Horizontale Ausrichtung der Zellen

Die Zellausrichtung kann mit Leerzeichen vor oder nach dem "Pipe" Zeichen definiert werden:

|Text ist links ausgerichtet |
| Text wird rechts ausgerichtet|
| Text ist zentriert |
|+++ Ein etwas längerer Text, damit die Ausrichtung besser sichtbar wird.+++|

Dargestellt als:

Vertikale Ausrichtung

Die vertikale Ausrichtung kann mit ^ für oben und , für unten als erstes Zeichen in der Zelle festgelegt werden: Eine horizontale Ausrichtung ist zusätzlich möglich.

|^oben links |^ oben mitte |^ oben rechts|
|mitte links | mittig | mitte rechts|
|,unten links |, unten mitte |, unten rechts|

Dargestellt als (der "Rahmen" ist nötig, um die Ausrichtung mit wenig Text sichtbar zu machen):

Wenn Sie die Zeichen ^ und , als erste Zeichen benötigen, dann können Sie "HTML escaping" verwenden.

Zellen zusammenfügen

Mit ~, < und > können Zellen zusammengefügt werden.

• Um eine Zelle mit der darüber liegenden zu vereinen verwenden sie: ~
• Um eine Zelle mit der links liegenden zu vereinen verwenden sie: <
• Um eine Zelle mit der rechts liegenden zu vereinen verwenden sie: >

|Zelle 1 |Zelle 2 |Zelle  3|Zelle  4|
|Zelle 5|Zelle 6| Zelle 7 |<|
|Zelle 8|~|Zelle  9|Zelle 10|
|>| Zelle 11 |Zelle 12|Zelle 13|

Dargestellt als:

Tabellen Klassen, Beschriftung, Kopfzeile und Fußzeile

Tabellen CSS Klassen, Beschriftung, Kopfzeile und Fußzeile können als "Pseudo Zeilen" dargestellt werden. Die Position der Zeilen ist dabei nicht wichtig:

|meineKlasse anderKlasse|k
| Das die Tabellen Beschriftung |c
|--- Kopfzeile ---|--- Kopfzeile ---|h
|Zelle 1|Zelle 2|
| Zelle 3 | Zelle 4|
|Fußzeile|Fußzeile|f

Dargestellt als:

https://tiddlywiki.com/#Transclusion%20in%20WikiText

Sie können mit dem Transklusions Mechanismus den Inhalt eines Tiddlers in einen anderen Tiddler einbinden:

• {{MeinTiddler}} transkludiert einen einzelnen Tiddler.
• {{MeinTiddler||VorlageTitel}} zeigt den Tiddler mit Hilfe eines VorlagenTiddlers an.
• {{||VorlageTitel}} benutzt einen Vorlagen Tiddler, ohne die interne Variable "current tiddler" zu verändern.

Statt den Tiddler Titel direkt anzugeben kann eine sogenannte TextReferenz verwendet werden:

• {{MeinTiddler!!feldName}} transkludiert den Inhalt eines Tiddler Feldes.
• {{!!feldName}} transkludiert das Feld des Tiddlers, der in der "current tiddler" Variable definiert ist.
• {{MyTiddler##index}} transkludiert ein spezifisches Feld aus einem so genannten: DataTiddlers
• {{##index}} transkludiert das angegebene Feld des "current DataTiddlers"

Eine ähnliche Syntax kann verwendet werden, um eine Liste von Tiddlern mit einem Filter einzubinden:

{{{ [tag[tagName]] }}}
{{{ [tag[tagName]] ||VorlageTitel}}}

Beispiel Transklusion

• Ideensammlung

Eine horizontale Trennlinie kann mit 3 minus Zeichen erstellt werden und sollte sparsam eingesetzt werden:

---

Dargestellt als:

Erzeugter HTML Code:

<hr>

WikiText kann Textblöcke direkt darstellen, wenn ihr Inhalts-Typ (MIME-Type) bekannt ist:

$$$image/svg+xml
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
$$$

Dargestellt als:

Es ist ebenfalls möglich, den Type über die Datei Erweiterung zu definieren:

$$$.svg
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
$$$

Dargestellt als:

Unbekannte Typen werden als Text dargestellt:

$$$text/unknown
Einfacher Text, der nicht //formatiert// wird.
$$$

Dargestellt als:

Einfacher Text, der nicht //formatiert// wird.

Zudem kann auch der auszugebende "Ziel-Typ" festgelegt werden. zB:

1)

$$$text/vnd.tiddlywiki>text/html
Hier steht ''fett formatierter'' WikiText.
$$$

2)

$$$text/vnd.tiddlywiki>text/plain
Hier steht ''fett formatierter'' WikiText.
$$$

3)

$$$text/vnd.tiddlywiki
Hier steht ''fett formatierter'' WikiText.
$$$

Dargestellt als:

1)

<p>Hier steht <strong>fett formatierter</strong> WikiText.</p>

2)

Hier steht fett formatierter WikiText.

3)

Hier steht fett formatierter WikiText.

Überschriften werden mit Ausrufezeichen ! spezifiziert. Es sind bis zu 6 Ebenen möglich:

! Überschrift Ebene 1

!! Überschrift Ebene 2

!!! Überschrift Ebene 3

Überschrift Ebene 1

Überschrift Ebene 2

Überschrift Ebene 3

CSS Klassen können in Ausnahmefällen von geübten Benutzern direkt angegeben werden:

!.myStyle Diese Überschrift wird die HTML Klasse class="myStyle" bekommen.

Widgets sind die Grundbausteine von TiddlyWiki. Sie haben ein sehr ähnliche Syntax wie HTML Elemente aber ihre "Tag Namen" beginnen immer mit einem $. zB:

<$button message="tm-close-tiddler">Schließe mich!</$button>

Schließe mich! .. Wird diesen Tiddler schließen :)

Widgets erben alle Funktionalitäten von HTML in WikiText:

• Widget Attribute können spezifiziert werden als:
  • Zeichenkette ohne Anführungszeichen. Attribute können dann keine Leerzeichen enthalten.
  • Zeichenkette mit einfachen oder doppelten Anführungszeichen. Leerzeichen sind möglich.
  • Zeichenkette mit 3 x doppelten Anführungszeichen. Leerzeichen und 1 doppeltes Anführungszeichen sind möglich.
  • Makro Aufruf zB: attr=<<meinMakro>>
  • Transklusionen zB: attr={{MeinTiddler!!feld}}
• Der Inhalt eines Widgets wird im "Inline Modus" verarbeitet, außer dem EröffnungsTag folgen 2 Zeilenumbrüche, welches den "Block Modus" erzwingt.
  • "Inline Modus" .. ist für Zeichen Formatierungen wie ''fett'' und //kursiv// zuständig.
  • "Block Modus" .. ist für Block Elemente wie: ! Überschriften und * Listen zuständig.

Siehe auch: HTML in WikiText für mehr Informationen.

Alle möglichen Widgets werden auf der TiddlyWiki Seite aufgelistet: https://tiddlywiki.com/#Widgets in WikiText

Block Syntax

Die übliche Behandlung von Absätzen in WikiText ignoriert einzelne Zeilenumbrüche. Zwei Zeilenumbrüche werden als neuer Absatz interpretiert.

Um trotzdem Texte mit "hartem" Zeilenumbruch darstellen zu können, zum Beispiel: "Gedichte", kann folgende Formatierung verwendet werden:

"""
Loch in die Erde,
Bronze rin.
Glocke fertig,
bim, bim, bim.
"""

Dargestellt als:

Loch in die Erde,
Bronze rin.
Glocke fertig,
bim, bim, bim.

Erzeugter HTML Code:

<p>Loch in die Erde,<br>Bronze rin.<br>Glocke fertig,<br>bim, bim, bim.<br></p>

HTML Syntax

In normalem Fließtext sollten keine zusätzlichen "harten" Zeilenumbrüche eingefügt werden, da diese bei unterschiedlichen Anzeigen zB: Handy's falsch dargestellt werden.

In Ausnahmefällen sollte es jedoch möglich sein, einen "harten" Zeilenumbruch zu setzen. Dafür kann der HTML <br> "tag" verwendet werden.

Erste Zeile <br/>
Zweite Zeile

Dargestellt als:

Erste Zeile
Zweite Zeile

HTML Code:

<p>Erste Zeile <br/>Zweite Zeile</p>

Es gibt zwei Möglichkeiten um Zitate zu erstellen. Eine, die mehrere Zeilen Text einfasst und eine, für einzelne Zeilen.

Mehrzeilige Zitate

Einfaches Zitat

Die Syntax für Zitate, die mehrere Zeilen einfasst ist wie folgt:

<<<
Das ist ein Absatz mit mehreren Zeilen im Quelltext.
Das Ergebnis wird zusammenhängend dargestellt.
<<<

Dargestellt als:

Das ist ein Absatz mit mehreren Zeilen im Quelltext. Das Ergebnis wird zusammenhängend dargestellt.

Erzeugter HTML Code:

<blockquote class="tc-quote"><p>Das ist ein Absatz mit mehreren Zeilen im Quelltext.
Das Ergebnis wird zusammenhängend dargestellt.
</p></blockquote>

Zitat mit Autor

Wenn Sie den Autor anführen möchten, dann schreiben Sie wie folgt:

<<<
Computers are like a bicycle for our minds
<<< Steve Jobs

Dargestellt als:

Computers are like a bicycle for our minds

Steve Jobs

Erzeugter HTML Code:

<blockquote class="tc-quote"><p>Computers are like a bicycle for our minds
</p><cite>Steve Jobs</cite></blockquote>

Einzeilige Zitate

Ein einzeiliger Zitat Block ist eine Erweiterung der Syntax für Listen in WikiText. Zum Beispiel:

> Einzeiliges Zitat 1
> Einzeiliges Zitat 2

Dargestellt als:

Einzeiliges Zitat 1

Einzeiliges Zitat 2

Erzeugter HTML Code:

<blockquote><div>Einzeiliges Zitat 1</div><div>Einzeiliges Zitat 2</div></blockquote>

Zitate können "verschachtelt" werden:

> Zitat 1
>> Zitat 1.1
> Zitat 2

Dargestellt als:

Zitat 1

Zitat 1.1

Zitat 2

Sie können Zitate mit Listenelementen mischen. zB:

* Liste Eins
** Liste Zwei
**> Ein Zitat
**> Ein weiteres Zitat
* Liste Drei

Dargestellt als:

• Liste Eins
  • Liste Zwei

    Ein Zitat

    Ein weiteres Zitat

• Liste Drei

Erzeugter HTML Code:

<ul><li>Liste Eins<ul><li>Liste Zwei<blockquote><div>Ein Zitat</div><div>Ein weiteres Zitat</div></blockquote></li></ul></li><li>Liste Drei</li></ul>

CSS Klassen

CSS Klassen, um eine Formatierung direkt zu ändern, können in Ausnahmefällen direkt angegeben werden. Diese Option ist nur für geübte Benutzer gedacht.

<<<.myClass.another-class
Operating systems are like a brick wall for our minds
<<< Nobody

Dargestellt als:

Operating systems are like a brick wall for our minds

Nobody

Erzeugter HTML Code:

<blockquote class="tc-quote myClass another-class"><p>Operating systems are like a brick wall for our minds
</p><cite>Nobody</cite></blockquote>