CSS Style for Code på din blogg

css

En vän till mig frågade mig hur jag skapade kodregionerna i mitt senaste blogginlägg. Jag "fejkade" faktiskt kodregionen med en stil. Inom Blogger kan du redigera din mall. Jag lade till följande stil:

p.code {font-family: Courier New; font-storlek: 8pt; kantstil: infälld; kantbredd: 3 pixlar; stoppning: 5px; bakgrundsfärg: #FFFFFF; linjehöjd: 100%; marginal: 10px}

Nästa steg är att redigera min tagg i läget "Redigera HTML". Jag pekar helt enkelt på min nya stil genom att göra taggen. Voila! Att bryta ner stilarna:

  • Ställ teckensnittet till Courier New ... ser ut som en generisk kodredigerare
  • Ställ in teckenstorleken till 8pt så att den ser rätt ut
  • Ställ in stycke kantstilen till "infälld". Detta replikerar hur ett textområde ser ut på sidan.
  • Ställ in kantbredden till 2 eller 3 pixlar. Detta gör att den infällda kantstilen ser rätt ut.
  • Padding anger avståndet mellan gränsen och texten inuti.
  • Bakgrundsfärg ... ställ in den till vit (#FFFFFF)
  • Linjehöjd - Jag justerade detta till 100% eftersom några av de andra stilarna i mitt bloggtema gjorde min linjehöjd cirka 200%
  • Ställ in marginalen på 10 px. Detta flyttar stycket (p-taggen) 10 pixlar bort från allt.

Det är allt det finns för det! En anmärkning: Redaktören som följer med Blogger kan inte visa den som den kommer att visas i din blogg. Men det fungerar och ser bra ut!

Ytterligare en anteckning ... efter att du har redigerat taggen gillar Blogger-redaktören att slumpmässigt använda den någon annanstans i ditt inlägg. Det är lite irriterande! Mitt råd skulle vara att skriva hela inlägget och sedan göra en liten redigering efteråt.

En sista anmärkning ... se till att använda HTML-enheter för att visa dina symboler! Ett par exempel:

  • Citat (“) är“
  • > är>
  • > är>

Lycklig kodning!

3 Kommentarer

  1. 1
  2. 2
  3. 3

    jag sak att det inte finns något behov av att skriva nu än. du kan använda hjälpsamma redaktörer. du kan välja färg, ram osv.

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.