Stilar

En stil bestämmer hela förhandsvisningens utseende: typografi, färger, avstånd, och hur kod och rutor ser ut. PeepMD har en samling inbyggda stilar, bland dem GitHub, standardstilen som den här handboken renderas i, och du kan lägga till egna.

Byta stil

Klicka eller tryck på stilnamnet till höger i statusfältet, eller i ornamentet längst ned till höger om fönstret på Vision Pro. På Mac och iPad listar en meny alla stilar. Välj en så byter förhandsvisningen stil med rullningspositionen intakt. På iPhone finns inte plats för en meny, så namnet öppnar Inställningar på panelen Tema i stället. Valet sparas mellan starterna och gäller varje dokument du öppnar.

Kodteman

En stil har egna färger för kodblock. Ett kodtema ersätter dem: blockets bakgrund och text, och färgerna för nyckelord, strängar, tal, namn, och kommentarer, ovanpå den stil som är aktiv. Åtta är inbyggda. GitHub, One, Solarized, och Xcode följer ljust och mörkt läge. Reading, Nord, Monokai, och Dracula är mörka block på vilken sida som helst.

Välj ett under Kod i Inställningar → Tema, panelen Tema i Inställningar på iPad, iPhone, och Vision Pro. Följ stilen är standard: stilens egna färger. Temat följer med dokumentet i export till PDF och HTML och i e-post.

Lägga till egna

På Mac öppnar du Inställningar → Tema med ⌘,, kugghjulet till vänster i statusfältet, eller Hantera stilar… i statusfältets meny. Inbyggda och egna stilar ligger i två listor, den ena ovanför den andra:

• Importera stil… kopierar .css-filer till din stilmapp, eller så släpper du filer i mappen själv (Öppna stilmappen tar dig dit). Varje fil visas i listan under sitt filnamn.
• Ta bort flyttar den egna stil du har markerat till papperskorgen. Inbyggda stilar kan inte tas bort, så knappen är bara aktiv för den nedre listan.
• Klicka på en rad i någon av listorna för att göra den stilen aktiv.

På iPad och iPhone trycker du på kugghjulet i det flytande statusfältet och väljer Tema. På Vision Pro är det kugghjulet i ornamentet under fönstret. Inbyggda och egna stilar listas under var sin rubrik. Tryck på en för att använda den, Importera stil… hämtar en .css-fil från Filer, och ett svep över en egen stil raderar den.

Skriva en stil

En stilmall är en fullständig ersättning, inte en lapp. Det renderade dokumentet omges av:

<article class="markdown-body">
  …ditt dokument…
</article>

så rikta in dig på .markdown-body på samma sätt som GitHubs stilmall gör. Den praktiska startpunkten är en kopia av en inbyggd stil, beskuren och omformad efter tycke. På Mac ligger de inuti själva appen, i PeepMD.app/Contents/Resources/GitHub.css. En stil ser samma HTML som varje dokument ger: rubriker har ankar-id:n, rutor är .markdown-alert-block, Critic-markeringar har klassen .critic, och kodblock har language-*-klasser.

Stilar gäller per enhet. Att skriva en är ett jobb för Mac, och den färdiga .css-filen kan skickas över till en iPad och importeras där.

Stiländringar som görs på disk gäller vid nästa rendering: spara CSS-filen och tryck sedan på ⌘R i förhandsvisningen (dra nedåt för att uppdatera på iPad och iPhone).

Ljust och mörkt läge

Förhandsvisningen följer det utseende som PeepMD körs i, alltså systemets eller det du har ställt in under Inställningar → Utseende, och din stilmall bestämmer hur den svarar. Det finns två strategier:

Anpassa. Definiera de ljusa färgerna som vanligt, åsidosätt dem sedan under en media query och deklarera båda färgschemana så att WebKits rullningslister och reglage stämmer:

:root { color-scheme: light dark; }

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

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...och eventuella länkar, kodbakgrunder, kanter... */
}

Håll fast vid ett utseende. En stil med stark identitet, som krämfärgat papper eller tidningspapper, kan förbli sig själv i mörkt läge, så länge den säger det och målar sin egen bakgrund:

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

Utan någon av de två renderar en stil som bara är ljus mörk text på mörk bakgrund i ett mörkt fönster. Den inbyggda GitHub.css är ett komplett exempel på den anpassande strategin, med hela sin palett definierad två gånger som CSS-variabler.

Använder du CSS-variabler för varje färg, som GitHub.css gör, krymper den mörka åsidosättningen till ett litet block i stället för en andra stilmall.

---

Föregående: Exportera och dela · Nästa: Inställningar