Estilo CSS para el código en su blog

css

Un amigo me preguntó cómo hice las regiones de código en mi última entrada de blog. De hecho, "falsifiqué" la región de código utilizando un estilo. Dentro de Blogger, puede editar su plantilla. Agregué el siguiente estilo:

p.code {font-family: Courier New; tamaño de fuente: 8pt; estilo de borde: recuadro; ancho del borde: 3px; relleno: 5px; color de fondo: #FFFFFF; altura de línea: 100%; margen: 10px}

El siguiente paso es editar mi etiqueta en el modo 'Editar Html'. Simplemente señalo mi nuevo estilo haciendo la etiqueta. ¡Voila! Desglosando los estilos:

  • Establezca la fuente en Courier New ... parece un editor de código genérico
  • Establezca el tamaño de fuente en 8 puntos para que se vea bien
  • Establezca el estilo del borde del párrafo en "recuadro". Esto replica el aspecto de un área de texto en la página.
  • Establezca el ancho del borde en 2 o 3 píxeles. Esto hace que el estilo de borde insertado se vea bien.
  • El relleno establece la distancia entre el borde y el texto interior.
  • Color de fondo ... configúrelo en blanco (#FFFFFF)
  • Altura de línea: ajusté esto al 100% porque algunos de los otros estilos en mi tema de blogger hicieron que la altura de mi línea fuera del 200%
  • Establece el margen en 10 px. Esto aleja el párrafo (etiqueta p) 10 píxeles de todo.

¡Eso es todo lo que hay también! Una nota: el editor que viene con Blogger no puede mostrar el como aparecerá en su blog. ¡Pero funciona y se ve genial!

Una nota más ... después de realizar la edición de la etiqueta, al editor de Blogger le gusta usarla de forma aleatoria en cualquier otro lugar de la publicación. ¡Es un poco molesto! Mi consejo sería escribir toda la publicación y luego hacer una pequeña edición.

Una nota final ... ¡asegúrese de usar entidades HTML para mostrar sus símbolos! Un par de ejemplos:

  • Las comillas (") son"
  • > es>
  • > es>

¡Feliz codificación!

3 Comentarios

  1. 1
  2. 2
  3. 3

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.