Zum Inhalt springen
Studio
System-UI

Typografie-Guide

Eine renderer-gestuetzte Markdown-Vorschau zum Feinjustieren von lesbarem Content, Schema-Feldausgaben und trusted Design-Bloecken.

Safety-first Basic

Basic Markdown

Basic Heading

Basic Markdown ist das sicherste oeffentliche Profil. Es unterstuetzt Absaetze, fetten Text, Hervorhebung, inline code, Links wie die Projektseite und harte Zeilenumbrueche.
Diese Zeile folgt absichtlich auf einen Markdown-Hardbreak.

Zitate bleiben fuer einfache Hervorhebungen oder kurze Hinweise verfuegbar.

  • ungeordneter Eintrag
  • weiterer ungeordneter Eintrag
  1. geordneter Eintrag
  2. zweiter geordneter Eintrag

Raw HTML wird in diesem Profil escaped: <strong>kein trusted HTML</strong>.

Headings, Hervorhebung, Links und Zeilenumbrueche

Markdown-Eingabe

# Hauptueberschrift

Absatztext kann **fetten Text**, _Hervorhebung_, `Inline-Code` und [einen Link](https://example.com) nutzen.

Ein Backslash erzeugt einen harten Umbruch.\
Diese Zeile bleibt im selben Absatz, beginnt aber visuell neu.

Gerenderte Ausgabe

Hauptueberschrift

Absatztext kann fetten Text, Hervorhebung, Inline-Code und einen Link nutzen.

Ein Backslash erzeugt einen harten Umbruch.
Diese Zeile bleibt im selben Absatz, beginnt aber visuell neu.

Geordnete und ungeordnete Listen

Markdown-Eingabe

- Erster ungeordneter Eintrag
- Zweiter ungeordneter Eintrag
  - Verschachtelter Eintrag

1. Erster geordneter Eintrag
2. Zweiter geordneter Eintrag

Gerenderte Ausgabe

  • Erster ungeordneter Eintrag
  • Zweiter ungeordneter Eintrag
    • Verschachtelter Eintrag
  1. Erster geordneter Eintrag
  2. Zweiter geordneter Eintrag

Zitate und fenced Code-Bloecke

Markdown-Eingabe

> Nutze Zitate fuer Quellen, Hinweise oder kurze Callouts.

```markdown
# Das wird als Code angezeigt

**Es wird hier nicht gerendert.**
```

Gerenderte Ausgabe

Nutze Zitate fuer Quellen, Hinweise oder kurze Callouts.

# Das wird als Code angezeigt

**Es wird hier nicht gerendert.**

Default-Allrounder

Rich Safe Markdown

Allrounder Heading

Tabellen und Task-Listen

Feature Ergebnis
Tabellen Gerendert
Task-Listen Gerendert
  • GitHub-artige Task Items rendern
  • Raw HTML weiter escapen

Description Lists, Marks und Footnotes

Begriff
Ein kompakter Description-List-Eintrag fuer glossarartigen Content.

Markierter Text ist fuer redaktionelle Hervorhebungen verfuegbar.

Footnotes bleiben nah an laengeren Artikeln.1

Externe Links wie https://example.com werden automatisch verlinkt und erhalten External-Link-Attribute.

<aside>Dieses Raw HTML wird vom Allrounder-Profil escaped.</aside>

  1. Footnotes rendern ueber das sichere Allrounder-Profil. ↩

Tabellen, Task-Listen und Strikethrough

Markdown-Eingabe

| Syntax | Ergebnis |
| --- | --- |
| Pipe-Zeichen | Tabellenspalten |
| `- [x]` | Task-Eintrag |

- [x] Beispiel schreiben
- [ ] Text polieren

~~Geloeschter Text~~ kann in redaktionellen Notizen sichtbar bleiben.

Gerenderte Ausgabe

Syntax Ergebnis
Pipe-Zeichen Tabellenspalten
- [x] Task-Eintrag
  • Beispiel schreiben
  • Text polieren

Geloeschter Text kann in redaktionellen Notizen sichtbar bleiben.

Description Lists, Highlights und Footnotes

Markdown-Eingabe

Markdown-Profil
: Eine benannte Rendering-Konfiguration mit bekannter Sicherheitsstufe.

==Markierter Text== kann Aufmerksamkeit erzeugen, ohne Raw HTML zu schreiben.

Laengere Inhalte koennen Footnotes nutzen.[^guide]

[^guide]: Footnotes eignen sich fuer Quellen, Kontext und redaktionelle Notizen.

Gerenderte Ausgabe

Markdown-Profil
Eine benannte Rendering-Konfiguration mit bekannter Sicherheitsstufe.

Markierter Text kann Aufmerksamkeit erzeugen, ohne Raw HTML zu schreiben.

Laengere Inhalte koennen Footnotes nutzen.1

  1. Footnotes eignen sich fuer Quellen, Kontext und redaktionelle Notizen. ↩

Table of contents und sichere Attribute

Markdown-Eingabe

[TOC]

## Erster Abschnitt

Die Ueberschrift erhaelt einen Anchor.

## Hervorgehobener Abschnitt {.studio-demo-attribute}

Sichere Attribute koennen angehaengt werden, wenn das Profil sie erlaubt.

Gerenderte Ausgabe

Erster Abschnitt

Die Ueberschrift erhaelt einen Anchor.

Hervorgehobener Abschnitt

Sichere Attribute koennen angehaengt werden, wenn das Profil sie erlaubt.

Trusted Design

Full Design Markdown

Design Heading

Design Markdown ist fuer trusted Schema-, Admin- oder Editor-gesteuerte Bloecke gedacht, bei denen mehr Layout-Kontrolle akzeptabel ist.

Attribut-gesteuerte Bloecke

Absaetze koennen kontrollierte Attribute nutzen, wenn das Profil sie erlaubt.

Trusted HTML

Markdown-Eingabe

<section class="studio-demo-callout">
    <strong>Trusted HTML</strong> kann in Design-Markdown gemischt werden.
</section>

Dieses Profil ist nur fuer trusted Schema-, Admin- oder Editor-gesteuerten Content gedacht.

Gerenderte Ausgabe

Trusted HTML kann in Design-Markdown gemischt werden.

Dieses Profil ist nur fuer trusted Schema-, Admin- oder Editor-gesteuerten Content gedacht.

Embeds

Markdown-Eingabe

Eine unterstuetzte Medien-URL kann zu einem Embed werden.

https://youtu.be/dQw4w9WgXcQ

Gerenderte Ausgabe

Eine unterstuetzte Medien-URL kann zu einem Embed werden.

Custom Attributes

Markdown-Eingabe

## Eine gestaltete Ueberschrift {.studio-demo-attribute}

Auch Absaetze koennen Attribute erhalten.
{.studio-demo-callout data-demo="typography"}

Gerenderte Ausgabe

Eine gestaltete Ueberschrift

Auch Absaetze koennen Attribute erhalten.