sábado, 12 de abril de 2008

Escribiendo código en un Blog

Resulta que quiero colocar un pequeño instructivo para poder instalar algunas aplicaciones , pero para ello debo ejecutar algunos comandos en la terminal de linux.
Además, en algunas ocasiones , seguramente se me ocurrirá escribir algún código en cualquier lenguaje, pero el hecho es que cuando lo voy a hacer en mi Blog , me encuentro que quedaba bien feo , puesto que solo se me ocurría presionar Enter , después para dar una impresión de tabulación le coloco una viñeta (y esto porque al darle la tecla espacio no lo toma en cuenta), después otra vez a Enter y queda mas o menos así:
  • aptitude search elcodigofeo
Así que seguramente, debía existir un método para "parsear" el texto y además darle el formato que uno quisiera. Obviamente ,las herramientas que trae el blog no permite hacerlo, así que decidí postear un paso a paso para darle formato al código cuando lo coloquemos por acá.

Colocar etiquetas <code> y </code>
Todo el código que queremos que HTML no lo interprete pues lo pondremos dentro de estas etiquetas, además le coloca de una vez un formato que se distingue del resto del texto, y queda así:

aptitude search elcodigomediofeo

Darle formato al código
Para poder ajustar el texto ingresado según nuestros gustos, debemos modificar una etiqueta que no es propia del lenguaje HTML sino de las hojas de estilo (CSS) , la cual es la opción style de <span> , entonces seguidamente después de las etiqueta <code> colocaremos y ajustaremos la etiqueta <span style=""> en ella hay varias opciones que podemos colocar dentro de las comillas, el valor asignado viene después de los : y cada opción es separada por ; finalizando con la comilla " .
Estas son las más practicas:
  • font-weight | Permite colocar la letra en normal o negrilla
  • color | Colocarle color a la fuente en valores hexadecimales o rgb
  • font-size | Colocarle el tamaño que quieras pero poner al final pt. ej: 15pt
  • background-color | Colocar el fondo del texto
Si aplicamos estos valores (aunque algunos se pueden obviar como el tamaño y color de la letra) nos quedaría una etiqueta como esta:
<span style="font-size:10pt; color:#000080; font-weight: bold; background-color: rgb(200, 200, 230);"> el código va aquí </span>

Colocamos el código de arriba, escribiéndolo directamente en el lugar donde editamos las entradas y el resultado es el siguiente:

aptitude search codigoconformato

Bueno espero les funcione.

0 comentarios:

Publicar un comentario