CSS Style til kode på din blog

En af mine venner spurgte mig, hvordan jeg lavede kodegrupperne på mit sidste blogindlæg. Jeg 'falske' faktisk kodeområdet ved hjælp af en stil. Inden for Blogger kan du redigere din skabelon. Jeg tilføjede følgende stil:

p.code {font-family: Courier New; skriftstørrelse: 8pt; kant-stil: indsats; kantbredde: 3 pixel; polstring: 5 px; baggrundsfarve: #FFFFFF; linjehøjde: 100%; margen: 10 pixel}

Det næste trin er at redigere mit tag i 'Edit Html' -tilstand. Jeg peger simpelthen på min nye stil ved at lave koden. Voila! Opdeling af stilarter:

• Indstil skrifttypen til Courier New ... ligner en generisk kodeditor
• Indstil skriftstørrelsen til 8pt for at se rigtigt ud
• Indstil afsnittets kantstil til 'indsat'. Dette replikerer, hvordan et tekstområde ser ud på siden.
• Indstil kantbredden til 2 eller 3 pixels. Dette får den indsatte kantstil til at se rigtigt ud.
• Polstring indstiller afstanden mellem kanten og teksten indeni.
• Baggrundsfarve ... indstil den til hvid (#FFFFFF)
• Linjehøjde - Jeg justerede dette til 100%, fordi nogle af de andre stilarter i mit blogger-tema gjorde min linjehøjde ca. 200%
• Indstil margenen til 10 px. Dette flytter afsnittet (p-tag) 10 pixels væk fra alt.

Det er alt der er også det! Én note: Editoren, der følger med Blogger, er ikke i stand til at vise den, som den vises i din blog. Men det fungerer og ser godt ud!

Endnu en note ... efter du har foretaget redigering af tagget, kan Blogger-editoren lide at tilfældigt bruge det andetsteds på tværs af dit indlæg. Det er lidt irriterende! Mit råd ville være at skrive hele dit indlæg og derefter foretage en lille redigering bagefter.

En sidste note ... Sørg for at bruge HTML-enheder til at vise dine symboler! Et par eksempler:

• Citater (“) er“
• > er>
• > er>

Glad kodning!