CSS Style for Code al vostre bloc

css

Un amic meu em va preguntar com vaig crear les regions del codi a la meva darrera entrada al bloc. De fet, vaig "falsificar" la regió del codi utilitzant un estil. A Blogger, podeu editar la plantilla. He afegit l'estil següent:

p.code {font-family: Courier Nou; mida de la lletra: 8pt; border-style: inset; amplada de la vora: 3 px; encoixinat: 5 px; color de fons: #FFFFFF; alçada de línia: 100%; marge: 10 px}

El següent pas és editar la meva etiqueta al mode "Edita HTML". Simplement apunto al meu nou estil creant l’etiqueta. Voila! Desglossant els estils:

  • Establiu el tipus de lletra a Courier New ... sembla un editor de codi genèric
  • Establiu la mida de la lletra a 8pt per tal que sembli correcta
  • Establiu l'estil de vora del paràgraf a "inset". Això replica l'aspecte d'una àrea de text a la pàgina.
  • Estableix l'amplada de la vora a 2 o 3 píxels. Això fa que l’estil de la vora de la inserció sembli correcte.
  • El farciment defineix la distància entre la vora i el text que hi ha a l'interior.
  • Color de fons ... estableix-lo en blanc (#FFFFFF)
  • Alçada de línia: l'he ajustat al 100% perquè alguns dels altres estils del tema del meu blogger feien que l'alçada de la meva línia fos aproximadament del 200%
  • Estableix el marge a 10 px. Això allunya el paràgraf (etiqueta p) a 10 píxels de tot.

Això és tot el que també hi ha! Una nota: l'editor que ve amb Blogger no pot mostrar el que apareixerà al vostre bloc. Però funciona i té un aspecte fantàstic.

Una nota més ... després de fer l'edició de l'etiqueta, a l'editor de Blogger li agrada fer-la servir a l'atzar en qualsevol altre lloc de la vostra publicació. És una mica molest! El meu consell seria escriure tota la publicació i després fer una petita edició després.

Una última nota ... assegureu-vos d'utilitzar les entitats HTML per mostrar els vostres símbols. Un parell d'exemples:

  • Les cites (") són"
  • > és>
  • > és>

Codificació feliç!

3 Comentaris

  1. 1
  2. 2
  3. 3

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.