Stile

Ein Stil bestimmt das gesamte Aussehen der Vorschau: Typografie, Farben, Abstände, die Gestaltung von Code und Hinweiskästen. PeepMD bringt eine Reihe integrierter Stile mit, darunter GitHub, der Standard, in dem dieses Handbuch erscheint, und du kannst eigene hinzufügen.

Wechseln

Klicke oder tippe auf den Stilnamen rechts in der Statusleiste, auf Vision Pro im Ornament unten rechts am Fenster. Auf Mac und iPad listet ein Menü jeden Stil auf; wähle einen, und die Vorschau wechselt ihr Aussehen, die Scrollposition bleibt erhalten. Auf dem iPhone ist kein Platz für ein Menü, darum öffnet der Name stattdessen die Einstellungen im Bereich Design. Die Wahl bleibt auch nach einem Neustart der App erhalten und gilt für jedes Dokument, das du öffnest.

Code-Designs

Ein Stil bringt eigene Farben für Codeblöcke mit. Ein Code-Design ersetzt sie: Hintergrund und Text des Blocks und die Farben von Schlüsselwörtern, Zeichenketten, Zahlen, Namen und Kommentaren, über dem gerade aktiven Stil. Acht sind integriert. GitHub, One, Solarized und Xcode folgen dem hellen und dunklen Modus. Reading, Nord, Monokai und Dracula sind auf jeder Seite dunkle Blöcke.

Wähle eines unter Code in Einstellungen → Design, dem Bereich Design der Einstellungen auf iPad, iPhone und Vision Pro. Dem Stil folgen ist der Standard: die eigenen Farben des Stils. Das Design reist mit dem Dokument in PDF- und HTML-Exporte und in E-Mails.

Eigene hinzufügen

Auf dem Mac öffnest du Einstellungen → Design mit ⌘,, mit dem Zahnrad links in der Statusleiste oder mit Stile verwalten … im Menü der Statusleiste. Integrierte und eigene Stile stehen in zwei Listen übereinander:

• Stil importieren … kopiert .css-Dateien in deinen Stile-Ordner, oder du legst Dateien selbst in den Ordner (Stile-Ordner öffnen bringt dich dorthin). Jede Datei erscheint in der Liste unter ihrem Dateinamen.
• Entfernen legt den ausgewählten eigenen Stil in den Papierkorb. Integrierte Stile lassen sich nicht entfernen, darum ist die Taste nur für die untere Liste aktiv.
• Klicke in einer der beiden Listen auf eine Zeile, um diesen Stil zu aktivieren.

Auf iPad und iPhone tippst du auf das Zahnrad in der schwebenden Statusleiste und wählst Design; auf Vision Pro ist es das Zahnrad im Ornament unter dem Fenster. Integrierte und eigene Stile stehen unter eigenen Überschriften; tippe auf einen, um ihn zu verwenden, Stil importieren … holt eine .css-Datei aus Dateien, und ein Streichen über einen eigenen Stil löscht ihn.

Einen Stil schreiben

Ein Stylesheet ersetzt alles, es ergänzt nichts. Das dargestellte Dokument ist umschlossen von:

<article class="markdown-body">
  …dein Dokument…
</article>

also sprich .markdown-body so an, wie es das Stylesheet von GitHub tut. Der praktische Ausgangspunkt ist eine Kopie eines integrierten Stils, gekürzt und nach deinem Geschmack umgeformt. Auf dem Mac liegen sie in der App selbst, unter PeepMD.app/Contents/Resources/GitHub.css. Ein Stil sieht dasselbe HTML, das jedes Dokument erzeugt: Überschriften tragen Anker-IDs, Hinweiskästen sind .markdown-alert-Blöcke, Critic-Markierungen tragen eine Klasse .critic, Codeblöcke tragen Klassen language-*.

Stile gelten pro Gerät. Einen zu schreiben ist Arbeit für den Mac, und die fertige .css-Datei lässt sich an ein iPad schicken und dort importieren.

Änderungen an einem Stil auf der Festplatte greifen bei der nächsten Darstellung: Sichere das CSS und drück dann ⌘R in der Vorschau (auf iPad und iPhone zum Aktualisieren nach unten ziehen).

Heller und dunkler Modus

Die Vorschau folgt dem Erscheinungsbild, in dem PeepMD läuft, also dem des Systems oder dem, das du unter Einstellungen → Erscheinungsbild festgelegt hast, und dein Stylesheet entscheidet, wie es darauf reagiert. Es gibt zwei Strategien:

Anpassen. Lege deine hellen Farben normal fest, überschreibe sie dann in einer Media Query und deklariere beide Schemata, damit die Rollbalken und Bedienelemente von WebKit passen:

:root { color-scheme: light dark; }

.markdown-body {
  color: #1f2328;
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...und alle Links, Code-Hintergründe, Rahmen... */
}

Bei einem Aussehen bleiben. Ein Stil mit starkem Charakter, etwa cremefarbenes Papier oder Zeitungspapier, kann im dunklen Modus er selbst bleiben, solange er das sagt und seinen eigenen Hintergrund malt:

:root { color-scheme: light; }
html { background-color: #ffffff; }

Ohne eine der beiden Strategien zeigt ein reiner Hell-Stil in einem dunklen Fenster dunklen Text auf dunklem Grund. Das integrierte GitHub.css ist ein vollständiges Beispiel für die anpassende Strategie, mit seiner ganzen Palette zweimal als CSS-Variablen definiert.

Verwendest du wie GitHub.css für jede Farbe CSS-Variablen, bleibt die dunkle Überschreibung ein kleiner Block statt eines zweiten Stylesheets.

---

Zurück: Exportieren und Teilen · Weiter: Einstellungen