Stile CSS per il codice sul tuo blog

css

Un mio amico mi ha chiesto come ho creato le regioni del codice nel mio ultimo post sul blog. In realtà ho "simulato" la regione del codice utilizzando uno stile. In Blogger puoi modificare il tuo modello. Ho aggiunto il seguente stile:

p.code {font-family: Courier New; dimensione del carattere: 8pt; stile bordo: inserto; larghezza del bordo: 3px; imbottitura: 5px; colore di sfondo: #FFFFFF; line-height: 100%; margin: 10px}

Il passaggio successivo consiste nel modificare il mio tag nella modalità "Modifica Html". Indico semplicemente il mio nuovo stile creando il tag. Ecco! Abbattere gli stili:

  • Imposta il carattere su Courier New ... sembra un editor di codice generico
  • Imposta la dimensione del carattere su 8pt per sembrare corretto
  • Imposta lo stile del bordo del paragrafo su "inserto". Questo replica l'aspetto di un'area di testo sulla pagina.
  • Imposta la larghezza del bordo su 2 o 3 pixel. Questo rende lo stile del bordo inserito correttamente.
  • Il riempimento imposta la distanza tra il bordo e il testo all'interno.
  • Colore di sfondo ... impostalo su bianco (#FFFFFF)
  • Altezza della riga: l'ho regolata al 100% perché alcuni degli altri stili nel tema del mio blogger rendevano la mia altezza della riga di circa il 200%
  • Imposta il margine su 10 px. Questo sposta il paragrafo (tag p) di 10 pixel da tutto.

Questo è tutto quello che c'è anche! Una nota: l'editor fornito con Blogger non è in grado di visualizzare il come apparirà nel tuo blog. Ma funziona e sembra fantastico!

Un'altra nota ... dopo aver apportato la modifica al tag, all'editor di Blogger piace utilizzarlo in modo casuale altrove nel tuo post. È un po 'fastidioso! Il mio consiglio sarebbe quello di scrivere l'intero post e poi fare l'unica piccola modifica in seguito.

Un'ultima nota ... assicurati di utilizzare le entità HTML per visualizzare i tuoi simboli! Un paio di esempi:

  • Le virgolette (") sono"
  • > è>
  • > è>

Buona programmazione!

Commenti

  1. 1
  2. 2
  3. 3

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.