Die Markdown-Vorschau in MarkNode lässt sich mit verschiedenen Designs gestalten. Wählen Sie ein integriertes Erscheinungsbild, lassen Sie die Vorschau automatisch Ihrem Anwendungsdesign folgen oder schreiben Sie Ihr eigenes CSS, das zu dem Ort passt, an dem Ihre Dokumente veröffentlicht werden.
Dem Anwendungsdesign folgen
Standardmäßig ist die Vorschau auf An App-Design anpassen eingestellt: Sie verwendet den integrierten Stil, der zu Ihrem aktuellen Anwendungsdesign passt. Wenn Sie also von Paper zu Midnight (oder einem anderen Design) wechseln, wird die Vorschau in einem Schritt passend umgefärbt. Sie müssen überhaupt kein Vorschaudesign auswählen, es sei denn, Sie möchten ein Erscheinungsbild, das sich vom Rest der App unterscheidet.
Integrierte Designs
MarkNode bringt eine Reihe integrierter Vorschaudesigns mit, die allen Benutzern zur Verfügung stehen. Sie sind schreibgeschützt und können nicht verändert werden, aber Sie können jederzeit eines davon kopieren und als Ausgangspunkt für ein eigenes Design verwenden. Neben den Stilen, die zu den einzelnen Anwendungsdesigns passen (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), gibt es auch orts- und stimmungsspezifische Erscheinungsbilder wie:
- GitHub Light und GitHub Dark — Darstellung im GitHub-Stil für Dokumentation
- Solarized Light und Solarized Dark — die Solarized-Farbpaletten
- Serif — eine zentrierte Serifenspalte für längere Fließtexte
- Compact — ein kompakteres Layout für dichte Nachschlagewerke
- Academic, Newsprint, Dracula und weitere
Die integrierten Designs leiten ihre Grundfarben für Hintergrund, Text, Links und Rahmen von Ihrem aktiven Anwendungsdesign ab, sodass sie hell wie dunkel stimmig aussehen, ohne dass Sie etwas neu auswählen müssen. (Es gibt außerdem einen internen Stil Default, der An App-Design anpassen zugrunde liegt; im Menü wählen Sie An App-Design anpassen statt direkt Default.)
Um das Design zu wechseln, klicken Sie auf die Schaltfläche Vorschaustil in der Kopfzeile der Vorschau oder klicken Sie mit der rechten Maustaste an eine beliebige Stelle in der Vorschau und verwenden Sie die Stilliste. Wählen Sie An App-Design anpassen, um dem Anwendungsdesign wieder zu folgen, oder wählen Sie einen bestimmten Stil, um ihn festzulegen. Die Änderung gilt sofort für alle Vorschauflächen — die angedockte Vorschau neben dem Editor und alle abgedockten Vorschaufenster — und bleibt über Sitzungen hinweg erhalten.
Ein eigenes Design erstellen
Wählen Sie im Menü für den Vorschaustil Neuer Stil auf dieser Grundlage…, um ein eigenes Design auf Basis des aktuell aktiven zu erstellen:
- Geben Sie einen Namen für Ihr neues Design ein. Namen dürfen nicht mit einem integrierten Namen übereinstimmen.
- Der CSS-Editor öffnet sich mit dem vorausgefüllten Quell-CSS — bearbeiten Sie es nach Belieben.
Während Sie tippen, wird die Vorschau live neu gerendert. Das CSS wird bis zum Speichern nur im Arbeitsspeicher gehalten, sodass Sie frei experimentieren können; wenn Sie es sich anders überlegen, schließen Sie den Editor, um Ihre Änderungen zu verwerfen.
Um ein bereits erstelltes eigenes Design zu bearbeiten, wählen Sie es aus und wählen Sie im selben Menü Aktuellen Stil bearbeiten….
Speichern und Weitergeben
Wenn Sie ein eigenes Design speichern, wird es in Ihrer globalen Designbibliothek abgelegt, sodass es in allen Projekten auf diesem Rechner verfügbar ist. Sie können zusätzlich Eine Kopie im aktuellen Projekt speichern ankreuzen, um es in das Projekt zu schreiben — dann wandert das Design mit dem Projekt mit. Wenn Sie das Projekt in Git einchecken, sehen alle Mitwirkenden, die das Repository klonen, dieselbe Vorschau.
Wenn Sie ein Projekt öffnen, das ein eigenes Vorschaudesign enthält, das Sie noch nicht besitzen, erscheint dieses Design in Ihrer Stilliste, solange das Projekt geöffnet ist.
Was eigenes CSS gestalten kann
Eigenes CSS gilt nur innerhalb des Vorschaucontainers (.markdown-preview) und wirkt sich daher nicht auf den Editor, die Seitenleiste oder andere Teile von MarkNode aus. Sie können Folgendes gestalten:
- Schriftarten und -größen im Textkörper
- Überschriften, Listen, Blockzitate und Tabellen
- Codeblöcke, Inline-Code und Farben der Syntaxhervorhebung
- Abstände, Innenabstände und die maximale Inhaltsbreite
Wenn sich Ihr eigenes Design automatisch an Hell und Dunkel anpassen soll, so wie es die integrierten tun, beginnen Sie mit einer Kopie eines integrierten Designs — Ihre Kopie erbt dessen designabhängige Grundlage, die Sie von dort aus anpassen können.
Umfangreiche Umstrukturierungen des DOM sind nicht möglich, da das CSS nur die visuelle Darstellung beeinflusst, nicht das zugrunde liegende HTML.
Ein eigenes Design löschen
Wählen Sie ein eigenes Design aus und verwenden Sie die Löschaktion im Stilmenü. Zuvor erscheint eine Bestätigungsabfrage. Wenn das gelöschte Design gerade aktiv ist, greift MarkNode auf das integrierte Standarddesign zurück. Integrierte Designs haben keine Löschaktion und können nicht entfernt werden.