Markdown Showcase | Maximilian Reinke

This post demonstrates everything you can use in blog articles.

Text Formatting

Regular paragraph text with bold, italic, ~~strikethrough~~, and inline code. You can also combine bold italic text.

Blockquotes are useful for highlighting important information or quoting external sources. They can span multiple lines.

Even multiple paragraphs.

Images

Placeholder image

Images are rendered responsive and get rounded corners automatically.

Code Blocks

Inline: use npm install to install dependencies.

Fenced block with syntax hint:

fn main() {
    let message = "Hello from reinke.ing";
    println!("{message}");

    let numbers: Vec<i32> = (1..=10)
        .filter(|n| n % 2 == 0)
        .collect();

    for n in &numbers {
        println!("Even: {n}");
    }
}

interface BlogPost {
  title: string;
  date: Date;
  tags: string[];
  draft: boolean;
}

async function fetchPosts(): Promise<BlogPost[]> {
  const response = await fetch("/api/posts");
  return response.json();
}

# Deploy script
docker build -f Containerfile -t my-app .
docker run -d -p 3000:3000 my-app
echo "Deployed successfully"

Lists

Unordered:

First item
Second item with a longer description that wraps to the next line to show how list items handle longer text content
Third item
- Nested item A
- Nested item B

Ordered:

Step one
Step two
Step three

Tables

Tool	Language	Use Case
Astro	TypeScript	Static sites
UnoCSS	CSS	Utility-first styling
Sharp	C/Node	Image processing
Marked	JavaScript	Markdown rendering

Details / Collapsible

Click to expand

Hidden content goes here. Useful for long code examples, logs, or supplementary information that would clutter the main flow.

{
  "name": "reinke-portfolio",
  "version": "1.0.0",
  "type": "module"
}

Headings Hierarchy

H3 Subheading

Content under H3.

H4 Subheading

Content under H4.

Diagrams (Mermaid)

Mermaid diagrams are rendered client-side. Wrap your diagram in a fenced code block with the mermaid language tag.

Flowchart:

Sequence diagram:

Git graph:

Horizontal Rules

Use --- to create visual separators between sections:

That covers all the main markdown features. Write your posts in src/content/blog/ and they show up automatically.

Dieser Beitrag demonstriert alles, was Sie in Blog-Artikeln verwenden können.

Textformatierung

Regulärer Absatztext mit fett, kursiv, ~~durchgestrichen~~ und Inline-Code. Sie können auch fett kursiv Text kombinieren.

Blockzitate sind nützlich, um wichtige Informationen hervorzuheben oder externe Quellen zu zitieren. Sie können sich über mehrere Zeilen erstrecken.

Sogar über mehrere Absätze.

Bilder

Platzhalterbild

Bilder werden responsiv gerendert und erhalten automatisch abgerundete Ecken.

Codeblöcke

Inline: Verwenden Sie npm install, um Abhängigkeiten zu installieren.

Eingezäunter Block mit Syntaxhinweis:

fn main() {
    let message = "Hello from reinke.ing";
    println!("{message}");

    let numbers: Vec<i32> = (1..=10)
        .filter(|n| n % 2 == 0)
        .collect();

    for n in &numbers {
        println!("Even: {n}");
    }
}

interface BlogPost {
  title: string;
  date: Date;
  tags: string[];
  draft: boolean;
}

async function fetchPosts(): Promise<BlogPost[]> {
  const response = await fetch("/api/posts");
  return response.json();
}

# Deploy-Skript
docker build -f Containerfile -t my-app .
docker run -d -p 3000:3000 my-app
echo "Erfolgreich bereitgestellt"

Listen

Ungeordnet:

Erstes Element
Zweites Element mit einer längeren Beschreibung, die in die nächste Zeile umbricht, um zu zeigen, wie Listenelemente längere Textinhalte behandeln
Drittes Element
- Verschachteltes Element A
- Verschachteltes Element B

Geordnet:

Schritt eins
Schritt zwei
Schritt drei

Tabellen

Werkzeug	Sprache	Anwendungsfall
Astro	TypeScript	Statische Websites
UnoCSS	CSS	Utility-first Styling
Sharp	C/Node	Bildverarbeitung
Marked	JavaScript	Markdown-Rendering

Details / Ausklappbar

Klicken, um zu erweitern

Versteckter Inhalt geht hier hin. Nützlich für lange Codebeispiele, Logs oder ergänzende Informationen, die den Hauptfluss stören würden.

{
  "name": "reinke-portfolio",
  "version": "1.0.0",
  "type": "module"
}

Überschriften-Hierarchie

H3 Unterüberschrift

Inhalt unter H3.

H4 Unterüberschrift

Inhalt unter H4.

Diagramme (Mermaid)

Mermaid-Diagramme werden clientseitig gerendert. Umschließen Sie Ihr Diagramm mit einem eingezäunten Codeblock mit dem mermaid Sprach-Tag.

Flussdiagramm:

Sequenzdiagramm:

Git-Graph:

Horizontale Linien

Verwenden Sie ---, um visuelle Trennlinien zwischen Abschnitten zu erstellen:

Das deckt alle wichtigen Markdown-Funktionen ab. Schreiben Sie Ihre Beiträge in src/content/blog/ und sie werden automatisch angezeigt.

Markdown Showcase Markdown Vorschau