Estilo CSS para código no teu blog

css

Un amigo meu preguntoume como fixen as rexións de código na miña última entrada no blog. En realidade "falsificaba" a rexión do código empregando un estilo. Dentro de Blogger, podes editar o teu modelo. Engadín o seguinte estilo:

p.code {font-family: Courier Novo; tamaño da fonte: 8pt; estilo de bordo: inserción; ancho de bordo: 3 px; recheo: 5 px; cor de fondo: #FFFFFF; altura da liña: 100%; marxe: 10 px}

O seguinte paso é editar a miña etiqueta no modo "Editar HTML". Simplemente apunto ao meu novo estilo facendo a etiqueta. Voila! Desglosando os estilos:

  • Establece o tipo de letra en Courier New ... parece un editor de código xenérico
  • Estableza o tamaño da letra a 8pt para que estea ben
  • Estableza o estilo do bordo do parágrafo en "inserción". Isto replica o aspecto dunha área de texto na páxina.
  • Estableza o ancho do bordo en 2 ou 3 píxeles. Isto fai que o estilo de bordo inserido pareza correcto.
  • O recheo define a distancia entre o bordo e o texto dentro.
  • Cor de fondo ... configúrao en branco (#FFFFFF)
  • Altura de liña: axusteino ao 100% porque algúns dos outros estilos do meu tema de blogger fixeron que a altura da miña liña fose do 200%
  • Establece a marxe en 10 px. Isto move o parágrafo (etiqueta p) a 10 píxeles de todo.

Isto é todo o que hai! Unha nota: o editor que vén con Blogger non pode amosar o que aparecerá no teu blog. Pero funciona e ten un aspecto estupendo.

Unha nota máis ... despois de facer a edición da etiqueta, ao editor de Blogger gústalle usalo ao azar noutros lugares da túa publicación. É un pouco molesto! O meu consello sería escribir toda a túa publicación e logo facer a pequena edición despois.

Unha última nota ... asegúrese de usar entidades HTML para amosar os seus símbolos. Un par de exemplos:

  • As citas (") son"
  • > é>
  • > é>

Feliz Codificación!