Le volet d’aperçu Markdown de MarkNode peut être stylisé avec différents thèmes. Choisissez une apparence intégrée, laissez l’aperçu suivre automatiquement le thème de votre application, ou écrivez votre propre CSS pour correspondre à l’endroit où vos documents seront publiés.
Suivre le thème de l’application
Par défaut, l’aperçu est réglé sur Suivre le thème de l’app : il utilise le style intégré associé à votre thème d’application actuel, de sorte que passer de Paper à Midnight (ou à tout autre thème) recolore l’aperçu en conséquence en une seule action. Vous n’avez pas besoin de choisir un thème d’aperçu, sauf si vous souhaitez une apparence différente du reste de l’application.
Thèmes intégrés
MarkNode est livré avec un ensemble de thèmes d’aperçu intégrés disponibles pour tous les utilisateurs. Ils sont en lecture seule et ne peuvent pas être modifiés, mais vous pouvez toujours en copier un comme point de départ pour un thème personnalisé. Outre les styles associés à chaque thème d’application (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), il existe des apparences spécifiques à un contexte ou à une ambiance, telles que :
- GitHub Light et GitHub Dark — un rendu de style GitHub pour la documentation
- Solarized Light et Solarized Dark — les palettes Solarized
- Serif — une colonne serif centrée pour les textes longs
- Compact — une mise en page plus resserrée pour les documents de référence denses
- Academic, Newsprint, Dracula, et plus encore
Les thèmes intégrés dérivent leurs couleurs de base d’arrière-plan, de texte, de liens et de bordures de votre thème d’application actif, afin qu’ils s’affichent correctement en mode clair et sombre sans que vous ayez à refaire de choix. (Il existe également un style interne Default qui sous-tend Suivre le thème de l’app ; vous choisissez Suivre le thème de l’app dans le menu plutôt que Default directement.)
Pour changer de thème, cliquez sur le bouton style d’aperçu dans l’en-tête du volet d’aperçu, ou faites un clic droit n’importe où dans l’aperçu et utilisez la liste des styles. Choisissez Suivre le thème de l’app pour suivre à nouveau le thème de l’application, ou choisissez un style spécifique pour le fixer. Le changement s’applique immédiatement à toutes les surfaces d’aperçu — l’aperçu ancré à côté de l’éditeur et toutes les fenêtres d’aperçu que vous avez détachées — et il est conservé d’une session à l’autre.
Créer un thème personnalisé
Depuis le menu des styles d’aperçu, choisissez Nouveau style à partir de celui-ci… pour créer un thème personnalisé basé sur celui actuellement actif :
- Saisissez un nom pour votre nouveau thème. Les noms ne peuvent pas correspondre à un nom intégré.
- L’éditeur CSS s’ouvre avec le CSS source pré-rempli — modifiez-le à votre convenance.
Au fur et à mesure que vous tapez, l’aperçu se met à jour en direct. Le CSS est conservé en mémoire jusqu’à ce que vous enregistriez, vous pouvez donc expérimenter librement ; si vous changez d’avis, fermez l’éditeur pour abandonner vos modifications.
Pour modifier un thème personnalisé que vous avez déjà créé, sélectionnez-le et choisissez Modifier le style actuel… dans le même menu.
Enregistrement et partage
Lorsque vous enregistrez un thème personnalisé, il est stocké dans votre bibliothèque de thèmes globale afin d’être disponible dans tous les projets de cette machine. Vous pouvez également cocher Enregistrer une copie dans le projet actuel pour l’écrire dans le projet, ce qui signifie que le thème accompagne le projet. Si vous versionnez le projet dans Git, chaque collaborateur qui clone le dépôt voit le même aperçu.
Lorsque vous ouvrez un projet contenant un thème d’aperçu personnalisé que vous ne possédez pas encore, ce thème apparaît dans votre liste de styles tant que le projet reste ouvert.
Ce que le CSS personnalisé peut styliser
Le CSS personnalisé est limité au conteneur d’aperçu (.markdown-preview), il n’affecte donc pas l’éditeur, la barre latérale ou toute autre partie de MarkNode. Vous pouvez styliser :
- Les polices et tailles du corps de texte
- Les titres, listes, citations et tableaux
- Les blocs de code, le code en ligne et les couleurs de coloration syntaxique
- L’espacement, les marges intérieures et la largeur maximale du contenu
Si vous souhaitez que votre thème personnalisé s’adapte automatiquement aux modes clair et sombre comme le font les thèmes intégrés, commencez par dupliquer un thème intégré — votre copie hérite de cette base sensible au thème et vous pouvez l’ajuster à partir de là.
Une restructuration importante du DOM n’est pas possible, car le CSS ajuste uniquement la présentation visuelle, et non le HTML sous-jacent.
Supprimer un thème personnalisé
Sélectionnez un thème personnalisé et utilisez l’action de suppression dans le menu des styles. Une confirmation apparaît d’abord. Si le thème que vous supprimez est celui actif, MarkNode revient au thème intégré par défaut. Les thèmes intégrés n’ont pas d’action de suppression et ne peuvent pas être supprimés.