Styles

Un style décide de tout l’aspect de l’aperçu : typographie, couleurs, espacements, mise en forme du code et des encadrés. PeepMD est livré avec une collection de styles intégrés, parmi lesquels GitHub, le style par défaut de ce manuel, et vous pouvez ajouter les vôtres.

Changer de style

Cliquez ou touchez le nom du style à droite de la barre d’état, ou dans l’ornement en bas à droite de la fenêtre sur Vision Pro. Sur le Mac et l’iPad, un menu liste tous les styles ; choisissez-en un et l’aperçu change de style, à la même position de défilement. Sur iPhone, il n’y a pas la place pour un menu : le nom ouvre donc les Réglages sur le volet Thème. Le choix est conservé d’un lancement à l’autre et s’applique à chaque document que vous ouvrez.

Thèmes du code

Un style a ses propres couleurs pour les blocs de code. Un thème du code les remplace : le fond et le texte du bloc, et les couleurs des mots-clés, des chaînes, des nombres, des noms et des commentaires, par-dessus le style actif. Huit sont intégrés. GitHub, One, Solarized et Xcode suivent le mode clair et le mode sombre. Reading, Nord, Monokai et Dracula sont des blocs sombres sur n’importe quelle page.

Choisissez-en un sous Code dans Réglages → Thème, le volet Thème des Réglages sur iPad, iPhone et Vision Pro. Suivre le style est le réglage par défaut : les couleurs propres au style. Le thème suit le document dans les exportations PDF et HTML et dans les e-mails.

Ajouter vos propres styles

Sur le Mac, ouvrez Réglages → Thème avec ⌘,, l’engrenage à gauche de la barre d’état, ou Gérer les styles… dans le menu de la barre d’état. Les styles intégrés et personnalisés se trouvent dans deux listes, l’une au-dessus de l’autre :

• Importer un style… copie des fichiers .css dans votre dossier de styles ; vous pouvez aussi déposer vous-même des fichiers dans ce dossier (Ouvrir le dossier des styles vous y mène). Chaque fichier apparaît dans la liste sous son nom de fichier.
• Supprimer met à la corbeille le style personnalisé sélectionné. Les styles intégrés ne peuvent pas être supprimés : le bouton n’est donc actif que pour la liste du bas.
• Cliquez sur une ligne de l’une ou l’autre liste pour activer ce style.

Sur iPad et iPhone, touchez l’engrenage dans la barre d’état flottante et choisissez Thème ; sur Vision Pro, c’est l’engrenage dans l’ornement sous la fenêtre. Les styles intégrés et personnalisés sont listés sous leurs propres en-têtes ; touchez-en un pour l’utiliser, Importer un style… fait entrer un fichier .css depuis Fichiers, et un balayage sur un style personnalisé le supprime.

Écrire un style

Une feuille de style remplace tout le style, elle ne s’ajoute pas par-dessus. Le document rendu est enveloppé dans :

<article class="markdown-body">
  …votre document…
</article>

ciblez donc .markdown-body comme le fait la feuille de style de GitHub. Le point de départ pratique est une copie d’un style intégré, élaguée et remodelée à votre goût. Sur le Mac, ils se trouvent dans l’app elle-même, à l’emplacement PeepMD.app/Contents/Resources/GitHub.css. Un style voit le même HTML que produit chaque document : les titres portent des identifiants d’ancre, les encadrés sont des blocs .markdown-alert, les marques CriticMarkup portent une classe .critic, les blocs de code portent des classes language-*.

Les styles sont propres à chaque appareil. L’écriture d’un style se fait sur le Mac, et le .css terminé peut être envoyé sur un iPad et importé là.

Les modifications d’un style faites sur le disque s’appliquent au rendu suivant : enregistrez le CSS, puis ⌘R dans l’aperçu (tirez vers le bas pour actualiser sur iPad et iPhone).

Mode clair et mode sombre

L’aperçu suit l’apparence dans laquelle PeepMD fonctionne, celle du système ou celle que vous avez réglée dans Réglages → Apparence, et votre feuille de style décide comment y répondre. Il y a deux stratégies :

S’adapter. Définissez normalement vos couleurs claires, puis remplacez-les dans une media query, et déclarez les deux modes pour que les barres de défilement et les commandes de WebKit s’accordent :

:root { color-scheme: light dark; }

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

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...et les liens, les fonds de code, les bordures... */
}

S’en tenir à un seul aspect. Un style à forte identité, papier crème ou papier journal par exemple, peut rester lui-même en mode sombre, à condition de le déclarer et de peindre son propre fond :

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

Sans l’une de ces deux stratégies, un style uniquement clair dans une fenêtre sombre affiche du texte sombre sur un fond sombre. Le GitHub.css intégré est un exemple complet de la stratégie adaptative, avec toute sa palette définie deux fois sous forme de variables CSS.

Utiliser des variables CSS pour chaque couleur, comme le fait GitHub.css, réduit le remplacement pour le mode sombre à un petit bloc au lieu d’une seconde feuille de style.

---

Précédent : Exporter et partager · Suivant : Réglages