¶ Uebersicht
Markdown ist eine so genannte Markup Language, wie beispielsweise auch HTML. Das bedeutet sie vefügt über bestimmte Zeichen und Codes die bestimmen, wie ein Text oder etwa eine Wiki-Seite dargestellt werden soll. Ein Ziel von Markdown ist, dass schon die Rohform leicht lesbar ist.
Da Markdown leicht zu lernen und quasi beliebig erweiterbar ist wir die Sprache besonders im IT-Bereich immer populärer und wird dir in Zukunft, auch als nicht-Informatiker*in, sicher noch an der ein oder anderen Stelle begegnen.
Tipp: Wenn dir Markdown gefällt kannst du das kostenlose Programm MarkText oder einen der zahlreichen anderen MD-Editoren verwenden um auch ganz normale Dokumente in Markdown zu schreiben und sie anschließend als PDF zu exportieren. Mit etwas Übung kann das beispielsweise eine sehr angenhme Art sein Protokolle zu schreiben.
¶ Standard-Markdown
Hier findest du zunächst alle grundlegenden Funktionen die nicht nur hier sondern in allen Markdown-Editoren funktionieren sollten.
¶ Aufgabenlisten
Aufgabenlisten werden mit - [ ] oder - [x] zu Beginn der Zeile notiert. Mehrere Ebenen lassen sich durch das Einrücken von Zeilen mit der tab Taste umsetzen. Punkte können nur durch das setzten eines x beim Bearbeiten abgehakt werden.
- [x] Blumen gießen
- [ ] Kothe Aufbauen
- [ ] OnPfad Planen
- [x] Markdown-Anleitung schreiben
- [ ] Chat aufräumen
Wird zu:
¶ Bilder
Bilder werden in Markdown nach folgendem Schema eingefügt .
Hier können Bilder aus der Bibliothek des Wikis verwendet werden. Am besten verwendest du hierfür die Schaltfläche am linken oberen Rand des Editors. Die meisten gängigen Bildformate (inklusive .svg) werden unterstützt.
Wird zu:
Bilder werden in ihrer Originalgröße dargestellt oder automatisch verkleinert um sie an den Bildschirm anzupassen, falls nötig. Du kannst Bildern aber auch manuell eine Höhe und/oder Breite zuweisen. Hierzu wird das Schema  verwendet. Wird nur einer der beiden Werte angegeben wird der andere automatisch berechnet, werden beide angegeben wird das Bild im Zweifelsfall gestreckt. Die Angaben können entweder in Pixeln oder Prozent der Seitenbreite/-höhe verwendet werden. Die Angaben in Prozent sind meistens die bessere Wahl, da sie sich auch auf Smartphones und Tablets ensprechend anpassen und besser aussehen.
Breite & Höhe in Pixeln
Breite in Pixeln
Höhe in Pixeln
Breite & Höhe in Prozent
Die Position von Bildern kann in WikiJS durch die Angabe entsprechender Tags am Ende des Bilds festgelegt werden. Aktuell gibt es Folgende Optionen:
- Linksbündig:
{.align-left} - Rechtssbündig:
{.align-right} - Zentriert:
{.align-center} - In der Kopfzeile:
{.align-abstopright}(Siehe Markdown-Logo ganz oben)
{.align-abstopright}
Diese Zeile platziert beispielsweise das Markdown-Logo ganz oben rechts
¶ Blockzitate
Mit Blockzitaten lassen sich bestimmte Teile einer Seite besonder hervorheben. Sie werden mir einem > vor dem Text dargestellt. Auch mehrere Ebenen durch mehrere Zeichen sind möglich, ergeben bei der Darstellung in disem Wiki allerdings relativ wenig Sinn.
> Das ist ein Blockzitat.
Diese Zeile gehört auch noch dazu.
> Diese hier ist ein neues Blockzitat.
Wird zu:
Das ist ein Blockzitat.
Diese Zeile gehört auch noch dazu.
Diese hier ist ein neues Blockzitat.
WikiJS bietet zusätzlich die Möglichkeit Blockzitate farblich hervorzuheben. Du findest diese Funktion im Menü des Editors oder kannst einfach die Formate mit geschwungenen Klammern aus dem Beispiel übernehmen.
> Das ist eine Info
{.is-info}
> Das ist ein Erfolg
{.is-success}
> Das ist eine Warnung
{.is-warning}
> Das ist ein Fehler
{.is-danger}
Das ist eine Info
Das ist ein Erfolg
Das ist eine Warnung
Das ist ein Fehler
¶ Code
Code kann von ` Zeichen umschlossen werden. Das ist zum Beispiel nützlich um eine Anleitung wie diese hier zu schreiben oder auch um bestimmte Dinge hervorzuheben.
Gut `https://vcp-rps.de` Pfad
Wird zu:
Gut https://vcp-rps.de Pfad
¶ Codeblöcke
Code kann von ``` Zeichen umschlossen werden um als ganzer Codeblock dargestellt zu werden. Das ist zum Beispiel nützlich um eine Anleitung wie diese hier zu schreiben.
```
class HelloWorld
{
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
```
Wird zu:
class HelloWorld
{
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
Code-Highlighting wird verwendet um Code besser lesbar darzustellen indem bestimmte Schlüsselwörter farbig hinterlegt werden. Hierzu muss einfach in der ersten Zeile die gewünschte Programmiersprache angegeben werden.
```java
class HelloWorld
{
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
```
Wird zu:
class HelloWorld
{
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
¶ Links
Links werden in Markdown nach folgendem Schema erstellt [Titel des Links](Link-Adresse).
Adressen die auf externe Seiten verweisen müssen mit https:// oder http:// beginnen und werden automatisch mit einem kleinen Symbol markiert. Für Links innerhalb des Wikis muss nur der Pfad zu der gewünschten Seite angegeben werden.
[VCP-RPS](https://vcp-rps.de)
[Diese Seite](/anleitungen/wiki/editoren/markdown)
Wird zu:
VCP-RPS
Für eine gut Formatierung mehrerer Links bietet sich die „links-list“-Funktion unsortierter Listen an. Ein Vorteil dieses Formats ist, dass Links zu existierenden Wiki-Seiten blau und Links zu fehlenden Seiten rot dargestellt werden.
¶ Nummerierte Listen
Nummerierte Listen werden mit 1. zu Beginn der Zeile notiert. Mehrere Ebenen lassen sich durch das Einrücken von Zeilen mit der tab Taste umsetzen. Ein Besonderheit ist, dass Makrdown die Nummerierung für dich übernimmt, sodas du alle Zeilen mit einer 1 beginnen kannst und automatisch gezählt wird. Wichtig ist, dass hinter 1. stets ein Leerzeichen ist.
1. Erstens
1. Gut
1. Pfad
1. Zweitens
1. Drittens
Wird zu:
- Erstens
- Gut
- Pfad
- Zweitens
- Drittens
¶ Sonderzeichen
Wie du wahrscheinlich schon gemerkt hast haben in Markdown viele Sonderzeichen wie etwa * oder ~ eine Bedeutung. Solltetst du doch mal eines dieser Zeichen als Text darstellen wollen, musst du es escapen. Das bedeutet du musst vor dem Zeichen noch ein \ einfügen. Für besonders ausgefallene Symbole kannst du ansonsten auch immer die hier angegebenen Kürzel verwenden.
\\ \* \~
✓
Wird zu:
\ * ~
✓
¶ Tabellen
In Markdown können Tabellen durch eine Mischung aus | und - Zeichen dargestellt werden. Eine Zeile folgt dabei dem Schema | Spalte1 | Spalte2 | Spalte3 |. Die erste Zeile kann zudem mit einer Zeile nach dem Schema |---|---|---| hervorgehoben werden. Da die Spaltenbreite von Markdown automatisch angepasst wird kannst du diese beliebig breit oder schmal machen, meistens ist es jedoch übersichtlicher sie mit Tabs auf eine einheitliche Breite zu bringen.
Tipp: Für komplexere Tabellen bietet es sich an einen Markdown-Editor wie MarkText zu verwenden und die fertige Tabelle anschließend hier ins Wiki zu kopieren.
| Titel 1 | Titel 2 | Titel 3 |
|---------|---------|---------|
| A | B | C |
| D | E | F |
|Titel 1|Titel 2|Titel 3|
|---|---|---|
|A|B|C|
|D|E|F|
Wird zu:
| Titel 1 | Titel 2 | Titel 3 |
|---|---|---|
| A | B | C |
| D | E | F |
| Titel 1 | Titel 2 | Titel 3 |
|---|---|---|
| A | B | C |
| D | E | F |
Mit der zweiten Zeile kannst du bestimmen ob der Inhalt einer Spalte linksbündig, rechtsbündig oder zentriert dargestellt werden soll
| Links | Mitte | Rechts |
|:--- |:---: |---: |
| A | B | C |
| D | E | F |
Wird zu:
| Links | Mitte | Rechts |
|---|---|---|
| A | B | C |
| D | E | F |
¶ Text formatieren
Text der fett dargestellt werden soll wird mit ** davor und danach markiert. Du kannst auch Text markieren und die Tastenkombination CTRL + B verwenden.
**Fetter Text** wird also zu Fetter Text
Text der kursiv dargestellt werden soll wird mit * davor und danach markiert. Du kannst auch Text markieren und die Tastenkombination CTRL + I verwenden.
*Kursiver Text* wird also zu Kursiver Text
Unterstrichener Text wird von Markdown meist verwendet um Links, Abkürzungen und andere Elemente zu markieren. Um Verwirrung zu vermeiden gibt es keine zusätzliche Funktion für unterstrichenen Text. Wenn du etwas hervorheben willst versuche stadessen lieber fett gedruckten Text zu verwenden.
Text der durchgestrichen dargestellt werden soll wird mit ~~ davor und danach markiert.
~~Durchgestrichener Text~~ wird also zu Durchgestrichener Text
Die Markierungen lassen sich auch beliebig kombinieren.
***~~Gut Pfad~~*** wird also zu Gut Pfad
¶ Trennlinien
Trennlinien werden in Markdown durch eine Leerzeile gefolgt von — markiert.
Gut
---
Pfad
Wird zu:
Gut
Pfad
¶ Überschriften
Überschriften werden mit vorangestellten # markiert. Eine Raute steht hierbei für die erste Ebene, zwei für die zweite bis hin zu sechs für die sechste.
Die ersten beiden Ebenen werden außerdem automatisch links im Inhaltsverzeichnis gelistet.
# Überschrift 1
## Überschrift 2
### Überschrift 3
#### Überschrift 4
##### Überschrift 5
###### Überschrift 6
¶ Unsortierte Listen
Listen werden mit einem - zu Beginn der Zeile notiert. Mehrere Ebenen lassen sich durch das Einrücken von Zeilen mit der tab Taste umsetzen. Wichtig ist, dass hinter - stest ein Leerzeichen ist.
- Gut
- Pfad
Wird zu:
- Gut
- Pfad
WikiJS bietet zusätzlich noch zwei weitere Möglichkeiten, Listen als „links-list“ oder „grid-list“ darzustellen. Um diese Darstellungen zu verwenden setze einfach das gewünschte Format in geschwungenen Klammern ans Ende der Liste. Beachte auch, dass die Link-Liste aus mehreren Komponenten besteht.
- [Markdown *Link zu dieser Seite*](/anleitungen/wiki/editoren/markdown)
- [Startseite *Link zur Startseite*](/home)
{.links-list}
und
- Erster Eintrag
- Zweiter Eintrag
{.grid-list}
Wird zu:
und
- Erster Eintrag
- Zweiter Eintrag
¶ Erweiterte Markdown-Syntax
Neben den oben genannten Funktionen gibt es noch viele weitere, die entweder nicht im Markdown-Standard enthalten sind oder nur in diesem Wiki anwendbar sind. Im folgenden findest du eine Liste.
¶ Abkürzungen
WikiJS bietet die Möglichkeit Abkürzungen oder auch andere Begriffe mit einer Erklärung zu versehen. Solche Begriffe werden grau unterstrichen dargestellt. Die Erklärung wird angezeigt, wenn sich der Mauszeiger auf dem Wort befindet.
Erklärungen werden nach dem Schema *[HTML]: Erklärung geschrieben und können überall auf der seite platziert werden.
*[VCP]: Verband Christlicher Pfadfinder
*[DPSG]: Ein Pfadfidnerverband
VCP und DPSG sind Teil des rdp.
Wird zu:
VCP und DPSG sind Teil des rdp.
¶ Emojis
Emojis können nach dem Schema :emoji-titel: verwendet werden. Eine Liste mit Verfügbaren Emojis findest du hier.
Ich schlafe am liebsten im :tent:
:mailbox:
Wird zu:
Ich schlafe am liebsten im 
¶ Hoch- & Tiefstellen
Text kann in WikiJS mit tiefgestellt werden indem er mit ~ umschlossen wird. Hochgestellten Text kannst du erzeugen indem du ihn mit ^ umschließt.
~Gut~ Hallo ^Pfad^
Wird zu:
Gut Hallo Pfad
¶ Mermaid-Diagramme
WikiJS bietet die Möglichkeit mit Mermaid Diagramme direkt im Text zu erzeugen. Hierfür muss einfach nur Mermaid-Code in einem entsprechend markierten Codeblock verwendet werden.
Die Mermaid-Dokumentation findest du hier.
```mermaid
pie
title Stufenverteilung im Stamm
"Wölis" : 30
"Pfadfinder" : 40
"R*Rs" : 7
```
Wird zu:
pie
title Stufenverteilung im Stamm
"Wölis" : 30
"Pfadfinder" : 40
"R*Rs" : 7
¶ Quellenangaben
WikiJS biete die Möglichkeit Quellenangaben zu Texten Hizuzufügen. Im text wird dabei eine kleine Markierung angegeben und am Ende der Seite die eigentliche Quelle aufgelistet. Eine Markierung im Text wird mit [^1] gesetzt, die eigentliche Quelle kann an beliebiger Stelle mit [^1]: beschrieben werden.
Die Quelle zu diesem Satz findest du ganz am Ende dieser Seite [^1]
[^1]: Ich bin eine Quelle
Wird zu:
Die Quelle zu diesem Satz findest du ganz am Ende dieser Seite [1]
¶ Tasten
Falls du Tastenkombinationen beschreiben oder aus irgendeinem anderen Grund Tasten einer Tastatur darstellen willst, kannst du beliebigen Text mit den Tags <kbd> und </kbd> umschließen.
<kbd>ctrl</kbd> + <kbd>C</kbd>
Wird zu:
ctrl + C
¶ Versteckter Text
WikiJS bietet die Möglichkeit Text zu verstecken, der bei Klicken aufgeklappt wird. Das kann zum Beispiel für ein Rätsel sehr nütlzlich sein. Für solche Blöcke wird folgendes Format verwendet:
<details>
<summary>Sichtbarer Text</summary>
Versteckter Text
</details>
<details>
<summary>Sichtbarer Text (Klick mich)</summary>
Versteckter Text
</details>
Wird zu:
Sichtbarer Text (Klick mich)
Versteckter Text¶ Videos
Aktuell ist diese Funktion leider nicht Verfügbar!
Videos die als MP4, zum Beispiel in unsere Cloud, hinterlegt sind kannst du mit einem Stück HTML einbinden. Hiezu muss das Video über einen öffentlichen Link erreichbar sein. Um das Video einzubinden kannst du folgenden Code verwenden:
<video controls="controls" width="Breite in Pixel" height="Höhe in Pixel">
<source src="Link zum Video" /></video>
<video controls="controls" width="800" height="400">
<source src="https://cloud.onpfad.de/f/068e7220797b4b2faa78/?dl=1" /></video>
¶
Ich bin eine Quelle ↩︎