Sandbox
Text Formatierungen
In der folgenden Tabelle stehen Beispiele für gängige Formatierungen mit Markdown. Man braucht die Formatierung nicht in der Vorschau zu überprüfen. Ihr Inhalt wird während der Eingabe der Markdown-Befehle automatisch formatiert.
| Formatierung | Syntax | Ausgabe |
|---|---|---|
| Fett | **Formatierung** |
Formatierung |
| Kursiev | *Formatierung* |
Formatierung |
| Fett-Kursiev | ***Formatierung*** |
Formatierung |
| Unterstrichen | ^^Formatierung^^ |
Formatierung |
| Durchgestrichen | ~~Formatierung~~ |
|
| Markiert | ==Formatierung== |
Formatierung |
| Monotype | ```Formatierung``` |
Formatierung |
Tabs
Tabs beginnen mit ===, um einen Tab anzuzeigen, gefolgt von einem Titel in Anführungszeichen. Aufeinanderfolgende Registerkarten werden in einem Registerkartensatz gruppiert.
Syntax
=== "Perl"
Hello World in Perl.
```perl
#!/usr/bin/perl -w
use strict;
print "Hello World\n";
```
=== "Python"
Hello World in Python.
```python
#!/usr/bin/env python
print(‘Hello World’)
```
Ausgabe
Hello World in Perl.
#!/usr/bin/perl -w
use strict;
print "Hello World\n";
Hello World in Python.
#!/usr/bin/env python
print(‘Hello World’)
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#overview
Marker
Um einen Text zu markieren, umgeben wir den Text einfach mit zwei =-Zeichen.
Syntax
Um einen Text zu ==markieren==, umgeben wir den Text einfach mit zwei Gleichheitszeichen.
Ausgabe
Um einen Text zu markieren, umgeben wir den Text einfach mit zwei Gleichheitszeichen.
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/mark/#overview
Tasklist
Die Tasklist- Erweiterung fügt Aufgabenlisten hinzu. Beginnen wir einfach jedes Listenelement mit einem eckigen Klammerpaar, das entweder ein Leerzeichen (ein nicht aktiviertes Element) oder ein x(ein aktiviertes Element) enthält.
Syntax
- [X] item 1
* [X] item A
* [ ] item B
more text
+ [x] item a
+ [ ] item b
+ [x] item c
* [X] item C
- [ ] item 2
- [ ] item 3
Ausgabe
- item 1
- item A
- item B
more text
- item a
- item b
- item c
- item C
- item 2
- item 3
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/#overview
Emoji
Die Emoji-Erweiterung fügt Unterstützung für das Einfügen von Emojis über einfache, in Doppelpunkte eingeschlossene Kurznamen hinzu: :short_name:. Dies wird erreicht, indem ein Kurznamenindex verwendet wird, um einfach zu merkende Namen zugeordneten Unicode-Daten zuzuordnen. Die Unicode-Daten werden dann in tatsächliche Unicode-Emoji-Zeichen und/oder spezielle HTML-Elemente (normalerweise Bilder) konvertiert, die das Emoji darstellen.
:fontawesome-solid-magnifying-glass: Emoji suchen
Syntax
:smile: :heart: :thumbsup: :joy: :beer:
Ausgabe
:smile: :heart: :thumbsup: :joy: :beer:
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/emoji/#overview
Hinweis Block
Ein Hinweis Block beginnt mit !!!, gefolgt von einem einzelnen Schlüsselwort (note, abstract, info, tip, success, question, warning, failure, danger, bug, example, quote), das als Typbezeichner verwendet wird. Der Inhalt des Blocks folgt in der nächsten Zeile, eingerückt durch vier Leerzeichen oder ein Tab.
Syntax
!!! Note "Notiz"
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Ausgabe
Notiz
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Wir können den Hinweisblock auch geschlossen darstellen. Dann verwenden wir statt den drei Ausrufezeichen, drei Fragezeichen ???.
Syntax
??? Tip "Hinweis"
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Ausgabe
Hinweis
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Möchten wir den Hinweis Block schon geöffnet dastellen, hängen wir nach den drei Fragezeichen ???+ ein Plus ran.
Syntax
???+ Example "Hinweis"
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Ausgabe
Hinweis
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Möchten wir überhaupt keinen Titel haben, nur einen Rahmen in der entsprechenden Farbe des Schlüsselworts, sentzen wir als Titel einen leeren String in zwei Hochkomma.
Syntax
!!! Danger ""
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Ausgabe
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Weitere Beispiele von Hinweis Blocks mit anderen Schlüsselwörtern.
Note
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Abstract
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Info
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Tip
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Success
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Question
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Warning
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Failure
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Danger
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Bug
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Example
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Quote
Dies ist eine kurze Notiz. Nach dem Schlüsselwort Note, können wir in Hochkomma unseren eigenen Titel definieren.
Weitere Informationen
https://squidfunk.github.io/mkdocs-material/reference/admonitions/#inline-blocks-inline
SmartSymbol
SmartSymbols fügt eine Syntax zum Erstellen von Sonderzeichen wie Marken, Pfeilen, Brüchen usw. hinzu. Es soll zusammen mit der smarty Erweiterung von Python Markdown verwendet werden, um es nicht zu ersetzen.
Syntax + Ausgabe
| Syntax | Ausgabe |
|---|---|
(tm) |
™ |
(c) |
© |
(r) |
® |
c/o |
℅ |
+/- |
± |
--> |
→ |
<-- |
← |
<--> |
↔ |
=/= |
≠ |
1/4 |
¼ |
1st 2nd |
1st 2nd |
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/#overview
Keys
Keys ist eine Erweiterung, die das Eingeben und Gestalten von Tastendrücken auf der Tastatur vereinfacht. Syntaktisch ist Keys um das +Symbol herum aufgebaut. Eine Taste oder Kombination von Tastendrücken wird von umgeben, ++wobei jeder Tastendruck durch ein einzelnes getrennt wird +.
Syntax
++ctrl+alt+delete++
Ausgabe
Ctrl+Alt+Del
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/keys/#overview
Hochgestellt
Um ein hochgestelltes Zeichen zu kennzeichnen, können Sie den gewünschten Inhalt in ein einzelnes einschließen ^. Es verwendet die Logik im Pandoc-Stil. Wenn Ihr hochgestelltes Zeichen also Leerzeichen enthalten muss, müssen Sie die Leerzeichen maskieren.
Syntax
H^2^0
Ausgabe
H20
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/caret/#overview
Tiefgestellt
Um einen tiefgestellten Index zu kennzeichnen, können Sie den gewünschten Inhalt in einzelne einschließen ~. Es verwendet die Logik im Pandoc-Stil. Wenn Ihr Index also Leerzeichen enthalten muss, müssen Sie die Leerzeichen maskieren.
Syntax
CH~3~CH~2~OH
Ausgabe
CH3CH2OH
Weitere Informationen
https://facelessuser.github.io/pymdown-extensions/extensions/tilde/#overview
Tabellen
Datentabellen können an jeder Stelle in Ihrer Projektdokumentation verwendet werden und können beliebiges Markdown enthalten, einschließlich Inline-Code-Blöcke, sowie Symbole und Emojis.
Syntax
| Method | Description |
| ----------- | ------------------------------------ |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
Ausgabe → Datentabelle
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
| Method | Description |
| :---------- | :----------------------------------- |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
Ausgabe → Datentabelle mit Spaltenausrichtung (Links)
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
| Method | Description |
| :---------: | :----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
Ausgabe → Datentabelle mit Spaltenausrichtung (Mittig)
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
| Method | Description |
| ----------: | -----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
Ausgabe → Datentabelle mit Spaltenausrichtung (Rechts)
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Weitere Informationen
https://squidfunk.github.io/mkdocs-material/reference/data-tables/#configuration
FontAwesome macro
Mit dem fa_icon() macro kannst du FontAwesome in der Seite nutzen. Im folgenden verwenden wir das 'square-plus' als regular.
{{ fa_icon('square-plus', 'regular') }}
Je nach Icon kann man auch solid, regular, light, thin oder brands als zweites Argument verwenden. Als Standard wird solid verwendet.
{{ fa_icon('square-pen') }}
Table macro
Normale Tabelle mit Tabellen Header und als zweiten Parameter die Daten der Tabelle.
{{ dynamic_table(["Name","Alter"], [["Alice", 30], ["Bob", 25]]) }}
| Name | Alter |
|---|---|
| Alice | 30 |
| Bob | 25 |
Werden als Tabellen Header keine Daten (leres Array) definiert, wird auf einen Tabellen Header verzichtet. Als dritten Parameter kann man noch einen CSS Klasse für die Tabelle angeben.
{{ dynamic_table([], [["Config", "/etc/screenstarter.ini"], ["Binary", "/usr/local/share/screenstarter.sh"]], "tblkeyval") }}
| Config | /etc/screenstarter.ini |
| Binary | /usr/local/share/screenstarter.sh |