Ein zweiter Post

Der erste Post war bewusst kurz. Dieser hier ist das Gegenstück: ein Platzhalter-Artikel, der möglichst viele der HTML-Elemente durchspielt, die ein echter Blogpost irgendwann braucht — Code, Zitate, Bilder und Kästen inklusive.

Ein erstes Codebeispiel

Zum Aufwärmen ein kurzer JavaScript-Schnipsel, um Syntax-Highlighting zu testen:

const greet = (name) => `Hallo, ${name}!`;

console.log(greet("Welt"));

Sobald Syntax-Highlighting eingerichtet ist, sollte der Codeblock oben farbig dargestellt werden — Schlüsselwörter, Strings und Funktionsnamen jeweils in einer eigenen Akzentfarbe aus der warmen Palette.

Ein CSS-Beispiel

Auch CSS soll sich lesbar highlighten lassen, inklusive nativem Nesting und Custom Properties, wie sie in diesem Projekt selbst zum Einsatz kommen:

.callout {
  --callout-color: var(--color-accent);

  padding: var(--space-s) var(--space-m);
  border-inline-start: 0.25rem solid var(--callout-color);

  & > :last-child {
    margin-block-end: 0;
  }
}

Zeig mir deinen Code, und ich sage dir, ob du deine Werkzeuge magst oder nur erträgst.

Alte Entwicklerweisheit

Bilder und Diagramme

Auch wenn dieser Blog bewusst ohne Bildoptimierungs-Pipeline auskommt, sollen sich Diagramme, Screenshots oder Illustrationen später sauber einfügen lassen — inklusive Bildunterschrift.

Platzhalterbild in Inhaltsbreite für ein Diagramm oder einen Screenshot
Ein einfaches Diagramm-Platzhalterbild in Standardbreite, mittig im Textfluss.

Achtung

Syntax-Highlighting funktioniert nur für Sprachen, die Prism kennt und die im Codeblock korrekt als Info-String angegeben sind (z. B. ```js statt ```javascript, falls die Kurzform fehlschlägt). Bei Unsicherheit lohnt ein Blick in die gerenderte Ausgabe.

Ein Breakout in die andere Richtung

Der erste Post zeigte ein Breakout-Bild nach links — hier eines nach rechts, damit beide Richtungen einmal zu sehen sind:

Breites Platzhalterbild, das rechts über die Textspalte hinausragt
Breakout nach rechts: die Textspalte bleibt links bündig, das Bild wächst nur nach rechts über sie hinaus.

Und ein Zitat, das in beide Richtungen zugleich ausbricht — als Pull-Quote, um eine Kernaussage optisch hervorzuheben:

Ein Layout, das nur eine feste Spaltenbreite kennt, ist kein Redaktionssystem — es ist ein Textfeld mit Anspruch.

Aus den Notizen zu diesem Relaunch
Randloses Panorama-Platzhalterbild als Abschluss des Artikels
Und noch einmal randlos, diesmal als ruhiger Abschluss vor dem letzten Abschnitt.

Kurz notiert

Wer bis hierhin gelesen hat: Dieser Artikel ist reiner Platzhaltertext, gedacht um Typografie, Breakouts, Zitate, Bilder und Callouts gegeneinander zu testen — nicht um inhaltlich etwas zu vermitteln.

npm run dev

Sobald echte Themen anstehen, ersetzen sie diese beiden Platzhalter-Posts — das Layout darunter sollte dafür jetzt tragfähig genug sein.