¶ 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:
Diese Seite wird im Laufe des Seminars erweitert, wenn neue Formatierungsherausforderungen gelöst wurden.
¶ Hinweise
Wiki.jsist 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:
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:
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.
- 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.
- 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>
¶ Code
Code im Fließtext pq = PriorityQueue<>().
Abgesetzter Code-Block:
def fun(x)
if
¶ Mathematische Formeln
Man wählt den Parameter .
¶ 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.
¶ Hoch- und Tiefstellen
H~2~O und e^10^
H2O und e10
¶ 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.
| Grouping | ||
|---|---|---|
| First Header | Second Header | Third Header |
| Content | Long Cell | |
| Content | Cell | Cell |
| New section | More | Data |
| And more | With an escaped '|' | |
| Stage | Direct Products | ATP Yields |
|---|---|---|
| Glycolysis | 2 ATP | |
| 2 NADH | 3--5 ATP | |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle | 2 ATP | |
| 6 NADH | 15 ATP | |
| 2 FADH2 | 3 ATP | |
| 30--32 ATP | ||