Markdown-Syntax und Plugins

Vorwort

Hier findet ihr eine detaillierte Übersicht der Markdown-Syntax, die auf unserer Webseite unterstützt wird. Wir bieten euch eine Vielzahl an Standard-Markdown-Optionen sowie einige spezielle Funktionen, die ihr in euren Beiträgen verwenden könnt.

Diese Übersicht umfasst alle Syntaxvarianten, die generell verfügbar sind. Weitere Details zur spezifischen Verfügbarkeit einzelner Syntaxelemente findet ihr beim jeweiligen Editor beim Erstellen eines Beitrags.

Inhaltsverzeichnis
  1. Vorwort
  2. Allgemeines
    1. Automatische Konvertierung
    2. Verschachtelte Elemente
  3. Markdown-Syntax
    1. Inhaltsverzeichnis
    2. Gallerie
    3. Container
      1. Default
      2. Info
      3. Success
      4. Warning
      5. Danger
    4. Videos
    5. Audios
    6. PDF Dateien
  4. Emojis emoji_HappyPain emoji_hidethepain emoji_kekwfuck emoji_painbrain emoji_pepedumb

Allgemeines

Automatische Konvertierung

In unserer Markdown-Umgebung gibt es bestimmte Regeln und Prozesse, die im Hintergrund ablaufen. Die automatischen Konvertierungen des Inhalts ermöglichen es, gewisse Elemente und Strukturen im Text ohne direktes Zutun umzuwandeln oder anzupassen. Ziel ist es, die Benutzerfreundlichkeit zu erhöhen, die Gestaltung von Inhalten zu vereinfachen und den Datenschutz sicherer zu machen.

Einige Beispiele für solche automatischen Konvertierungen sind:

  • Link-Handling: Links können auf verschiedene Weisen automatisch modifiziert werden. Dazu gehören unter anderem das Hinzufügen von Icons für externe Links, direkte Download-Links oder von Affiliate-Links.
  • Kapitel: Kapitel werden automatisch mit einer ID versehen. Diese ID ermöglicht eine direkte Verlinkung. Zusätzlich dazu den Kapiteln Icons als visueller Indikator hinzugefügt.
  • Emoji-Integration: Sowohl standard Unicode Emojis als auch custom Emojis werden unterstützt. Mehr Details befinden sich im Kapitel Emojis.

Verschachtelte Elemente

Um komplexe Textstrukturen erstellen zu können, können in Markdown verschiedene Elemente ineinander verschachtelt werden. Ein häufiges Beispiel dafür ist das Einbetten eines Code-Blocks innerhalb eines anderen Code-Blocks. Dies kann jedoch zu Konflikten führen, da Markdown das Ende des äußeren Code-Blocks verwechseln kann, wenn dieselbe Anzahl von Backticks (`) verwendet wird.

Um dieses Problem zu lösen, verwendet man für den äußeren Code-Block eine höhere Anzahl von Backticks. Dies wird als "Backtick-Eskalation" bezeichnet. Hier ein Beispiel:

Um einen einfachen Code-Block zu erstellen, verwendet man drei Backticks:

```
console.log("Hello Code!");
```

Wenn du jedoch einen Code-Block innerhalb eines anderen Code-Blocks einbetten möchtest, musst du für den äußeren Block vier Backticks verwenden:

````
Oh seht her! 
So kann man einen richtig formatierten Codeblock in einem Codeblock verwenden:
```
console.log("Hello Code!");
```
Das ist gut um jemanden zu zeigen, wie man Code formatiert!
Und das ohne dass die Formatierung des Codes formatiert wird.

````

Diese Methode stellt sicher, dass Markdown die unterschiedlichen Ebenen der Code-Blöcke korrekt interpretiert und anzeigt. Dieses Prinzip der Backtick-Eskalation gilt nicht nur für Code-Blöcke, sondern kann auch auf andere verschachtelte Strukturen in unserem Markdown-Syntax angewendet werden, um ähnliche Konflikte zu vermeiden.

Markdown-Syntax

Inhaltsverzeichnis

Ein Inhaltsverzeichnis kann mit [[table of contents]] erstellt werden. Es reicht, lediglich diese Zeile an der Position einzufügen, an der das Inhaltsverzeichnis aufgeführt werden soll. Anhand der Überschriften wird das Inhaltsverzeichnis automatisch erstellt. Berücksichtigt werden folgende drei Überschriften:

  • ## Überschrift 2
  • ### Überschrift 3
  • #### Überschrift 4

Gallerie

Schritt 1:
Erstelle die Basis für deine Gallerie mit dem folgendem Syntax:

:::: gallery

::::

Schritt 2:
Füge deiner Gallerie verschiedene Einträge hinzu:

:::: gallery

::: gallery:item
Hier könnte Ihre Werbung stehen!
:::

::::

Schritt 3: Lektion abgeschlossen!

Gallerien sind ein mächtiges Werkzeug, wenn du Wert darauf legst, deine Inhalt übersichtlich zu formatieren.

Gallerien eigenen sich zum Beispiel hervorragend für Bilder aber natürlich steht es dir frei, die Gallerie so zu verwenden wie du es für sinnvoll erachtest.

Fortgeschrittene Lektion: Swipe nach links

::::: gallery

:::: gallery:item
::: container:success
So sieht es gut aus!
:::
::::


:::: gallery:item
::: container:success
So sieht es gut aus!
:::
::::


:::::

Gallerien sind ein mächtiges Werkzeug, wenn du wert darauf legst deine Inhalt übersichtlich zu formatieren. Sie eigenen sich zum Biespiel hervorragend für Bilder-Gallerien. Natürlich steht es dir frei, die Gallerie zu verwenden wie du möchtest. Du kannst sogar verschiedene Code-Schnipsel in eine Gallerie packen. Go for it!

Container

Es gibt die Möglichkeit, einfache Container in einem Beitrag zu verwenden. Container dienen dazu, bestimmte Inhalte gesondert bzw. farblich hervorzuheben. Insgesamt gibt es fünf Arten von Containern:

  1. Default
  2. Info
  3. Success
  4. Warning
  5. Danger

Diese Container können mit oder ohne Titel verwendet werden.

Default

::: container
Default-Container ohne Titel.
:::

::: container Mit einem schönem Titel
Default-Container mit einem schönem Titel.
:::

Info

::: container:info
Info-Container
:::

::: container:info Mein informierender Titel
Info-Container mit einem informierendem Titel
:::

Success

::: container:success
Success-Container
:::

::: container:success Mein erfolgreicher Titel
Success-Container mit einem erfolgreichem Titel.
:::

Warning

::: container:warning
Warning-Container
:::

::: container:warning Mein warnender Titel
Warning-Container mit einem warnendem Titel.
:::

Danger

::: container:danger
Danger-Container
:::

::: container:danger Mein gefährlicher Titel
Danger-Container mit einem gefährlichem Titel.
:::

Videos

Es lassen sich Video aus den makesmart-Uploads einbinden. Dazu folgt man einem Bildähnlichen Syntax:
Nach dem HTML5 Standard, lassen sich Videos mit den folgenden full supported Mimetypes einbinden:

  • video/mp4
  • video/webm
  • video/ogg
!video[Beschreibung](Link zum Video)

Audios

Es lassen sich Audios aus den makesmart-Uploads einbinden. Dazu folgt man einem Bildähnlichen Syntax:
Nach dem HTML5 Standard, lassen sich Audios mit den folgenden full supported Mimetypes einbinden:

  • audio/mpeg (.mp3)
  • audio/wav (.wav)
  • audio/ogg (.ogg)
!audio[Beschreibung](Link zur Audio)

PDF Dateien

PDF-Dateien können mit einem ähnlichen Syntax wie Bilder, Videos oder Audios eingebunden werden:

!pdf[Das hier kann eine PDF-Datei anzeigen](https://makesmart.development.fail/upload/hochformat-pdf-de98c)

Öffne diese PDF-Datei direkt im Browser

Emojis emoji_HappyPain emoji_hidethepain emoji_kekwfuck emoji_painbrain emoji_pepedumb

  • Kann Default-Unicode Emojis like:
  • 😄, 💋, 🦜, ...
  • Kann Custom-Emojis mit Bildern in einen gegebenen Ordner. Die Emojis heißen dabei immer wie die Datei
    heh.png -> :heh:, KEKw.png -> :KEKw: