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#
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- Verschachtelter geordneter Punkt
- Ein weiterer verschachtelter Punkt
- Zurück zur Hauptebene
Gemischte Listen#
- Geordneter Punkt
- Ungeordneter Unterpunkt
- Ein weiterer Unterpunkt
- Ein weiterer geordneter Punkt
- Weitere Unterpunkte
- Tief verschachtelt
- Ein weiterer tiefer Punkt
- Weitere Unterpunkte
Aufgabenlisten#
- Erledigte Aufgabe
- Ausstehende Aufgabe
- Eine weitere erledigte Aufgabe
- Eine weitere ausstehende Aufgabe
Links und Referenzen#
Grundlegende Links#
Links mit Titeln#
Referenz-Links#
Auto-Links#
E-Mail-Links#
Bilder#
Grundlegende Bilder#
Referenz-Bilder#
Lokale Bilder#

Code-Blöcke#
Eingezäunte Code-Blöcke#
function greet(name) {
console.log('Hello, ' + name + '!');
return 'Welcome, ' + name;
}
const result = greet('World');
console.log(result);
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)))
.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#
#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory
{
"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"
}
}
<!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
// Sogar Code-Blöcke console.log('Hallo aus dem Blockzitat');
Tabellen#
Grundlegende Tabelle#
Name | Alter | Beruf |
---|---|---|
Hans | 25 | Entwickler |
Anna | 30 | Designerin |
Max | 35 | Manager |
Ausgerichtete Tabelle#
Linksbündig | Zentriert | Rechtsbündig |
---|---|---|
Inhalt | Inhalt | Inhalt |
Mehr Inhalt | Mehr Inhalt | Mehr Inhalt |
Komplexe Tabelle#
Feature | Markdown | HTML | Hinweise |
---|---|---|---|
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:
Block-Mathematik#
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#
- Hierarchie: Verwende Überschriften, um eine klare Inhaltsstruktur zu schaffen
- Konsistenz: Behalten Sie eine einheitliche Formatierung bei
- Lesbarkeit: Wähle Schriftarten und Abstände für optimales Lesen
- 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#
-
Das ist der Inhalt der Fußnote. ↩
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!
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!