CSS Style for Code på din blogg

css

En vän till mig frågade mig hur jag gjorde kodregionerna i mitt senaste blogginlägg. Jag "fejkade" faktiskt kodregionen med en stil. I Blogger kan du redigera din mall. Jag har lagt 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! 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 gränssnittsstilen för stycket till 'infoga'. 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 som finns också! 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 notering ... när du har redigerat taggen gillar Blogger -redigeraren 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 ditt inlägg och sedan göra den enda lilla redigeringen 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.