Formatierungsbeispiele

Hier sind ein paar Beispiele für spezielle Formatierungen in Wiki.js. Die Standard Markdown Syntax kann z. B. auf den folgenden Seiten nachgelesen werden:

• Markdown Cheat Sheet
• Markdown Syntax in Wiki.js

Diese Seite wird im Laufe des Seminars erweitert, wenn neue Formatierungsherausforderungen gelöst wurden.

Hinweise

• Wiki.js ist noch relativ neu in der Entwicklung und dementsprechend gibt es noch einige Fehler. Zum Beispiel stimmt die Vorschau nicht in allen Details mit der tatsächlichen Darstellung überein. Text, der von Unterstrichen eingerahmt ist, erscheint in der Vorschau unterstrichen, wird auf der richtigen Seite aber kursiv dargestellt.
• Bitte wählen Sie den Markdown Editor zu editieren aus. Insbesondere bei der Verwendung unterschiedlicher Editoren für dieselben Seiten könnte es sonst zu Konflikten kommen.
• Nicht vergessen, Speichern anzuklicken. Auch wenn die Vorschau Änderungen unmittelbar anzeigt, werden diese nicht automatisch gespeichert und gehen z. B. verloren, wenn das Browser-Tab geschlossen wird, ohne vorher zu speichern.

Referenzen

Eine Referenzliste und Verweise auf Einträge in dieser Liste können am besten mit Fußnoten realisiert werden. Diese können mit selbst gewählten Labeln versehen und in beliebiger Reihenfolge aufgelistet werden. Beim Rendering werden die Referenzen / Fußnoten automatisch nach Reihenfolge des Auftretens im Text durchnummeriert. Referenzen, die nicht im Text referenziert werden, tauchen in der Liste am Ende nicht auf.

Beispiel: Demaine und Kollegen haben gezeigt, dass das Spiel Phutball NP-vollständig ist. ^[1]

Hier ist der Verweis durch [^Demaine2002] erzeugt. Am Ende der Datei steht der entsprechende Eintrag, eingeleitet durch das gewählte Label gefolgt von :

[^Demaine2002]: Demaine ED, Demaine ML, Eppstein D. **Phutball endgames are hard.** *More Games of No Chance.* 2002 Nov 25;42:351. [arXiv](https://arxiv.org/pdf/cs/0008025)

Dieser Eintrag kann irgendwo im Dokument stehen, z. B. direkt hier oder ganz am Ende. Dargestellt werden alle Referenzen / Fußnoten immer am Ende des Dokumentes, egal, wo sie in der Markdown Datei stehen.

Weitere Informationen zu Fußnoten sind hier zu finden.

Bilder

Bilder können über

# ![<Alt Text>](<URL> "<TOOLTIP>" <SIZE>){<ALIGNMENT>}

eingebunden werden. Dabei sind <SIZE>, "<TOOLTIP>" und {<ALIGNMENT>} optional. Konkretes Beispiel:

![](https://upload.wikimedia.org/wikipedia/commons/6/6e/Phutball_jump.svg "Abbildung von Lakkasuo CC BY-SA 3.0")

Hier wurde direkt eine URL aus dem Internet verwendet. Alternativ können Bilder auch in das Wiki hochgeladen werden. Dazu klicken Sie in der linken Spalter auf Datei(en) einfügen. Dort navigieren Sie zu /teaching/2022ws-algodat-se und erstellen (falls noch nicht geschehen) einen Unterordner mit Ihrem Namen. Dann können Sie auf der rechten Seite Dateien hochladen. Diese Bilddateien können Sie dann wie folgt einbinden:

![](/teaching/2022ss-algodat-se/blankertz/phutball_jump.svg)

Hier nun ein Beispiel mit Größenwahl und Ausrichtung (Achtung: nach dem Gleichheitszeichen darf kein Leerzeichen vor der Größenspezifikation stehen):

![Ein Sprung im Phutball Spiel](/teaching/2022ss-algodat-se/blankertz/phutball_jump.png "Abbildung von Lakkasuo CC BY-SA 3.0" =30%x){.align-center}

Bilder in rechter Spalte neben dem Text

Dafür muss man nach meinem Kenntnisstand auf HTML Formatierung zurückgreifen. In dem Standard Layout von Wiki.js kann es allerdings zu einem Konflikt kommen, wenn das Bild bis in den nächsten Abschnitt hereinragt.

In diesem Fall geht der horizontale Strich unter der Überschrift durch das Bild. Dies kann man auf zwei Arten vermeiden.

1. Man klickt oben rechts auf Seite, wechselt dort in den Tab Stile und definiert dort die Überschriften neu ohne Unterstreichung durch den folgenden Code:

.v-main .contents h1:after,
.v-main .contents h2:after,
.v-main .contents h3:after,
.v-main .contents h4:after {
  background: rgba(255,255,255,0)!important
}

Dadurch kann die Abbildung weiterhin in den nächsten Abschnitt hereinragen, aber sie wird nicht durch die horizontalen Striche durchkreuzt.

2. Die andere Methode ist es, folgende Abschnitte erst unterhalb des Bildes anfangen zu lassen. Dafür fügt man den folgenden HTML Code vor der Überschrift des nächsten Abschnittes ein:

<figure style="clear:both”></figure>

Extended Markdown

Emojis

Emojis können durch Emoji Shortcuts wie :bulb: eingegeben werden. Eine Liste mit Emoji Shortcuts ist hier, allerdings gibt es dafür keinen Standard, also ist unklar, welche von Wiki.js unterstützt werden.

Infokästen / Blockquotes

Für das Anzeigen von Infokästen, schreibt man {.is-info} in die Zeile nach der Blockquote. Andere Farben und Symbole erhält man durch {.is-warning}, {.is-success} und {.is-danger}.

Ansonsten können normale Blockquotes in Verbindung mit Emojis genutzt werden.

Beachte: Der Dijkstra Algorithmus kann bei entsprechender Implementation auch bei Graphen mit negativen Gewichten angewendet werden. Dann gilt allerdings nicht die übliche Laufzeitabschätzung.

Hoch- und Tiefstellen

H~2~O und e^10^

H₂O und e¹⁰

Tabellen

Die Darstellung von Tabellen gefällt mir im aktuellen Wiki.js Stil optisch nicht so gut. Trotzdem hier ein paar Beispiele für komplexere Tabellen. Ggf. kann man die Optik mit CSS verbessern (einzufügen durch Seite > Stile).

Zur Formatierung siehe markdown-it-multimd-table.

Literaturliste