Vollständiger Markdown Typografie-Leitfaden

Ein umfassender Leitfaden zu allen Markdown-Typografie-Features und Formatierungsoptionen.

Dieser Leitfaden zeigt alle möglichen Markdown-Typografie-Features und Formatierungsoptionen, die in modernen Markdown-Prozessoren verfügbar sind.

Überschriften#

Überschrift 1 (H1)#

Überschrift 2 (H2)#

Überschrift 3 (H3)#

Überschrift 4 (H4)#

Überschrift 5 (H5)#
Überschrift 6 (H6)#

Textformatierung#

Grundlegende Formatierung#

Fetter Text lässt wichtige Informationen hervorstechen. Kursiver Text fügt bestimmten Worten Betonung hinzu. Fett und kursiv kombiniert beide Stile für maximale Wirkung. Durchgestrichener Text zeigt gelöschten oder veralteten Inhalt.

Inline-Code#

Verwende Inline-Code für kurze Code-Schnipsel, Dateinamen oder technische Begriffe.

Betonungsebenen#

Leichte Betonung für subtile Hinweise. Starke Betonung für wichtige Punkte. Sehr starke Betonung für kritische Informationen.

Listen#

Ungeordnete Listen#

  • Einfacher Aufzählungspunkt
  • Ein weiterer Punkt
    • Verschachtelter Aufzählungspunkt
    • Ein weiterer verschachtelter Punkt
      • Tief verschachtelter Punkt
  • Zurück zur Hauptebene

Geordnete Listen#

  1. Erster Punkt
  2. Zweiter Punkt
  3. Dritter Punkt
    1. Verschachtelter geordneter Punkt
    2. Ein weiterer verschachtelter Punkt
  4. Zurück zur Hauptebene

Gemischte Listen#

  1. Geordneter Punkt
    • Ungeordneter Unterpunkt
    • Ein weiterer Unterpunkt
  2. Ein weiterer geordneter Punkt
    • Weitere Unterpunkte
      • Tief verschachtelt
      • Ein weiterer tiefer Punkt

Aufgabenlisten#

  • Erledigte Aufgabe
  • Ausstehende Aufgabe
  • Eine weitere erledigte Aufgabe
  • Eine weitere ausstehende Aufgabe

Links und Referenzen#

Grundlegende Links#

Linktext

Links mit Titeln#

Link mit Titel

Referenz-Links#

Referenz-Link

Auto-Links#

https://example.com

E-Mail-Links#

user@example.com

Bilder#

Grundlegende Bilder#

Alt-Text

Referenz-Bilder#

Alt-Text

Lokale Bilder#

Lokales Beispielbild

Code-Blöcke#

Eingezäunte Code-Blöcke#

JavaScript
function greet(name) {
  console.log('Hello, ' + name + '!');
  return 'Welcome, ' + name;
}

const result = greet('World');
console.log(result);
Python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Berechne die ersten 10 Fibonacci-Zahlen
for i in range(10):
    print("F(" + str(i) + ") = " + str(fibonacci(i)))
CSS
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.button {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

Eingerückte Code-Blöcke#

Das ist ein eingerückter Code-Block Er behält die Formatierung bei Und verwendet eine Monospace-Schrift

Syntax-Hervorhebung#

Bash
#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory
JSON
{
  "name": "example-project",
  "version": "1.0.0",
  "description": "A sample project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a sample HTML document.</p>
</body>
</html>

Blockzitate#

Einfache Blockzitate#

Das ist ein einfaches Blockzitat. Es kann sich über mehrere Zeilen erstrecken.

Verschachtelte Blockzitate#

Blockzitat der ersten Ebene

Blockzitat der zweiten Ebene

Blockzitat der dritten Ebene Zurück zur zweiten Ebene Zurück zur ersten Ebene

Blockzitate mit anderen Elementen#

Wichtiger Hinweis: Dieses Blockzitat enthält formatierten Text.

  • Es kann Listen enthalten
  • Und andere Markdown-Elemente
JavaScript
// Sogar Code-Blöcke
console.log('Hallo aus dem Blockzitat');

Tabellen#

Grundlegende Tabelle#

NameAlterBeruf
Hans25Entwickler
Anna30Designerin
Max35Manager

Ausgerichtete Tabelle#

LinksbündigZentriertRechtsbündig
InhaltInhaltInhalt
Mehr InhaltMehr InhaltMehr Inhalt

Komplexe Tabelle#

FeatureMarkdownHTMLHinweise
Fett**text**<strong>text</strong>Starke Betonung
Kursiv*text*<em>text</em>Betonung
Code`code`<code>code</code>Inline-Code
Link[text](url)<a href="url">text</a>Hyperlinks

Horizontale Linien#




Zeichen-Escaping#

Spezielle Zeichen#

*Das ist nicht kursiv* `Das ist kein Code` [Das ist kein Link] # Das ist keine Überschrift

Backslashes#

\kursiv wird zu *kursiv*

Mathematische Ausdrücke#

Inline-Mathematik#

Die quadratische Formel ist: ax2+bx+c=0ax^2 + bx + c = 0

Block-Mathematik#

ex2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Dieser mathematische Ausdruck ist als Gauß-Integral bekannt und bildet die Grundlage der Normalverteilung.

Ein komplexeres Beispiel:

\begin{align} \nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\ \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\epsilon_0\frac{\partial \vec{E}}{\partial t} \end{align}

Das sind die Maxwell-Gleichungen, die die Grundlage des Elektromagnetismus bilden.

Fußnoten#

Hier ist ein Satz mit einer Fußnote1.

Definitionslisten#

Begriff 1
Definition 1
Begriff 2
Definition 2
Eine weitere Definition für Begriff 2

Erweiterte Features#

Zusammenklappbare Abschnitte#

Zum Erweitern klicken

Dieser Inhalt ist standardmäßig verborgen und kann durch Klicken auf die Zusammenfassung erweitert werden.

  • Er kann beliebigen Markdown-Inhalt enthalten
  • Einschließlich Listen
  • Und formatiertem Text

Admonitions#

Hinweis: Das ist ein Hinweisblock mit wichtigen Informationen.

Warnung: Das ist ein Warnungsblock für kritische Informationen.

Tipp: Das ist ein Tipp-Block mit hilfreichen Vorschlägen.

Best Practices#

Typografie-Prinzipien#

  1. Hierarchie: Verwende Überschriften, um eine klare Inhaltsstruktur zu schaffen
  2. Konsistenz: Behalten Sie eine einheitliche Formatierung bei
  3. Lesbarkeit: Wähle Schriftarten und Abstände für optimales Lesen
  4. Barrierefreiheit: Stelle sicher, dass der Inhalt für alle Nutzer zugänglich ist

Markdown-Richtlinien#

  • Verwende semantisches Markup statt visueller Formatierung
  • Halte die Zeilenlänge angemessen (80-120 Zeichen)
  • Verwende beschreibenden Linktext
  • Füge Alt-Text für Bilder hinzu
  • Teste dein Markdown in verschiedenen Renderern

Fazit#

Dieser umfassende Leitfaden deckt alle wichtigen Markdown-Typografie-Features ab. Denk daran, dass nicht alle Markdown-Prozessoren jedes Feature unterstützen, also teste deinen Inhalt immer in deiner Zielumgebung.

Für weitere Informationen besuche den Markdown-Leitfaden.

Footnotes#

  1. Das ist der Inhalt der Fußnote.

Loading...

Kommentare (0)

An der Unterhaltung teilnehmen

Melde dich an, um deine Gedanken zu teilen und mit der Community zu interagieren

Noch keine Kommentare

Sei der erste, der deine Gedanken zu diesem Beitrag teilt!

Related Posts