Markdown-Showcase: alle gängigen Auszeichnungen

Dieser Beitrag dient als lebendige Referenz: Er zeigt jede Markdown-Auszeichnung, die dieser Blog tatsächlich rendert. Nutze ihn als Vorlage beim Schreiben neuer Beiträge oder zum Prüfen, ob das Theme in Light und Dark Mode überall sauber aussieht.

Textauszeichnung

Ein normaler Absatz mit fettem Text, kursivem Text und fett-kursivem Text. Außerdem gibt es durchgestrichenen Text, inline code und einen Inline-Link zur Nuxt-Doku.

Mehrere Sätze in einem Absatz bleiben zusammen. Ein einfacher Zeilenumbruch (zwei Leerzeichen am Ende) erzeugt einen weichen Umbruch innerhalb desselben Absatzes.

Links lassen sich auch als Referenz schreiben: siehe die Vue-Dokumentation. Solche Links im Fließtext werden am Ende automatisch in der Liste „Weiterführend" gesammelt.

Überschriften-Ebenen (H2)

Die H1 stammt aus dem Frontmatter-Titel. Im Fließtext beginnst du daher bei H2.

Dritte Ebene (H3)

Vierte Ebene (H4)

Listen

Ungeordnete Liste:

• Erster Punkt
• Zweiter Punkt mit Hervorhebung
• Dritter Punkt
  • Verschachtelter Punkt
  • Noch einer
    • Dritte Verschachtelungsebene

Geordnete Liste:

1. Schritt eins
2. Schritt zwei
3. Schritt drei
   1. Unterschritt 3.1
   2. Unterschritt 3.2

Task-Liste (GFM):

• Erledigte Aufgabe
• Noch eine erledigte
• Offene Aufgabe
• Weitere offene Aufgabe

Zitate

Ein einfaches Blockzitat. Es nutzt die semantische Rahmenfarbe und passt sich an Light und Dark Mode an.

Zitate lassen sich verschachteln:

Dies ist ein verschachteltes Zitat innerhalb eines Zitats.

Und auch Auszeichnungen innerhalb eines Zitats funktionieren.

Code

Inline-Code sieht so aus: const x = 42. Längere Blöcke bekommen einen Sprach-Badge und einen Copy-Button.

// TypeScript - mit Syntax-Highlighting (Shiki, Dual-Theme)
interface User {
  id: number
  name: string
  roles: string[]
}

function greet(user: User): string {
  return `Hallo, ${user.name}!`
}

<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <button @click="count++">Zählerstand: {{ count }}</button>
</template>

# Shell-Befehle
pnpm dev
pnpm lint && pnpm typecheck

{
  "name": "enaah.de",
  "private": true,
  "type": "module"
}

Ein Codeblock ohne Sprachangabe rendert ohne Highlighting:

plain text, kein Highlighting
nur monospace

Tabellen

Spalten lassen sich ausrichten:

Bilder

Bilder liegen unter public/ und werden als statische Assets ausgeliefert. Der alt-Text ist Pflicht.

Eine kursive Zeile direkt unter dem Bild dient als Bildunterschrift.

Trennlinie

Ein horizontaler Trenner gliedert längere Beiträge:

Sonstiges

Du kannst HTML-Entities wie © — und ♥ nutzen. Auch einfache Tastaturkürzel als Inline-Code lesen sich gut: drücke Cmd + K.

Eine Aussage mit Fußnote¹ und eine zweite².

Damit sind alle gängigen Auszeichnungen abgedeckt. Fehlt etwas, das du regelmäßig brauchst? Ergänze es hier, dann bleibt dieser Beitrag die eine verlässliche Vorlage.