¶ 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 Spalte auf Datei(en) einfügen bzw. Insert Assets. Dort navigieren Sie zu /teaching/2025ws-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>
¶ Mathematische Formeln
Mathematische Formeln können druch MathJax durch $-Zeichen eingerahmt im -Stil gesetzt werden. Zum Beispiel erhält man durch $2+2=2\cdot 2$. Eingerahmt von doppelten $$ werden die Formeln abgesetzt in einer eigenen Zeile dargestellt:
(Mehr zu dieser erstaunlichen Identität erklärt Mathologer.)
Auf diese Art können auch komplexere mathematische Formeln übersichtlich dargestellt werden:
: Anzahl der Gewinne ab Knoten
: Anzahl der Simulationen ab Knoten
: Exploitation/Exploration Konstante
Weitere Erläuterungen und komplexere Beispiele werden auf folgenden Seiten gegeben:
- Übersicht zur Formattierung mathematische Formeln in Markdown im MathJax
- Beispiele komplexerer Formeln mit MathJax
¶ Programmcode
Text innerhalb einer, der als Code dargestellt werden soll, wird in einfache Backticks ` eingerahmt. So erhält man solve_bfs(). Ein Codeblock wird zwischen zwei Zeilen mit dreifachen Backticks ``` eingefügt. Hinter die einleiten Backticks kann der Name einer Programmiersprache geschrieben werden, um entsprechendes Syntax Highlighting zu erzeugen.
def solve_bfs(self, goal):
node = self[self.start]
queue = [node]
marked = {node}
parent = {}
while queue:
node = queue.pop(0)
if node.cell == goal:
break
for adj in node.neighbors:
if adj not in marked:
marked.add(adj)
queue.append(adj)
parent[adj] = node
¶ 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^
erzeugt H2O und e10. Ein ähnlicher Effekt kann auch durch MathJax erzielt werden: HO bzw. HO.
¶ 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 | ||