Willkommen zum Styling-Test!

Dies ist der normale Fließtext. Er sollte jetzt in einer gut lesbaren, serifenlosen Schriftart (Sans-Serif) dargestellt werden und nicht mehr wie auf einer alten Schreibmaschine aussehen. Hier testen wir auch direkt mal fetten Text (Strong) und kursiven Text (Italic).

Manchmal möchte man auch Dinge ~~durchstreichen~~.

Listen und Aufzählungen

Tech-Blogs brauchen oft gute Listen. Hier ist eine unsortierte Liste:

Erstes Element in der Liste
Zweites Element, das ein bisschen länger ist, um zu sehen, wie der Zeilenumbruch funktioniert und ob der Abstand links (Indentation) gut aussieht.
Drittes Element mit etwas inline-code mittendrin.

Und hier eine nummerierte Liste:

Den Server starten
Kaffee kochen
Den perfekten Code schreiben

Zitate und Info-Boxen

Manchmal musst du etwas Wichtiges hervorheben oder jemanden zitieren. Dafür nutzen wir Blockquotes:

Pro-Tipp: Vergiss niemals, deine Tailwind-Klassen nach einem Update neu kompilieren zu lassen, indem du den Entwicklungs-Server neu startest! Das spart Stunden an Fehlersuche.

Links und Bilder

Natürlich wollen wir auch auf andere Seiten verweisen. Hier ist ein Link zur offiziellen Angular Dokumentation. Er sollte lila sein und beim Drüberfahren (Hover) einen schönen Unterstrich bekommen.

Code-Blöcke

Inline-Code haben wir schon getestet (wie das hier: npm install), aber was ist mit echten Code-Blöcken?

// Das ist ein simulierter Code-Block
import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `<h1>Hallo Welt</h1>`
})
export class TestComponent {
  sayHello() {
    console.log("Markdown funktioniert perfekt!");
  }
}