Escribiendo Codigo en tu página

Empezando con el Blog me he visto en la necesidad de escribir código legible, y aunque el editor de Blogger (cortesía de Google actualmente) esta muy bien, yo no he encontrado la opción de "insertar Código".

Sí, exíste la manera de insertar directamente HTML, pero si pegas tu trozo de código en el HTML directamente no es la manera más lícita y correcta de hacerlo. Además, ¿y si el código que quiero mostrar es JS o HTML?. El explorador lo interpretará y no lo veréis, además de un formato no muy cómodo.

Para eso existe la etiqueta <code> que en conjunto de <pre> nos permite escribir código en una página web sin problemas. En el caso concreto de querer escribir HTML tenemos que usar la etiqueta <xmp> que podemos encapsular dentro de la de code, como veremos a continuación.

Los foros de programación como StackOverflow ya te vienen con la opción de "insertar bloque de código", pero en el caso de Blogger tienes que hacertelo tú.

Ahora os contare como hice para escribir trozos de código como este:


 public double median() {
  int middle = lst_sorted.length / 2; // Consigo la mitad
  double median,temp1,temp2; 
  temp1 = (double)lst_sorted[middle]; 
  temp2 = (double)lst_sorted[middle-1];
  
  if (lst_sorted.length % 2 == 0) { // Si es par
   median = (temp1 + temp2) / 2; 
  } else {
   median = lst_sorted[middle]; 
  }
  return median; 
 }

Para ello use los recursos de Prettify y que para este caso nos hará falta la librería JS y el theme CSS que queramos usar.

1. Instalar librería JS de Prettify

La manera que he encontrado de hacerlo es pegando el link de la librería en la cabecera de la plantilla del Blog. Para ello usaremos el link de CloudFare.

Si quereis buscar directamente solo teneis que escribir "Prettify" en el buscador de CloudFare, es la manera más óptima y sencilla.

Entrais en el menú de configuración de vuestro Blog
Vais a la pestaña de Plantillas
Pulsais en Editar HTML
Dentro de los tags <head> </head> añadimos la librería


<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js" type="text/javascript"></script>

PD: No es // sino http:// como ya sabreis

2. Insertar theme CSS

Podemos elegir un theme CSS de los disponibles en la página oficial del proyecto.

Blogger te permite insertar tu propio código CSS, para hacerlo tenéis que hacer lo siguiente:

Entrais en el menú de configuración de vuestro Blog
Vais a la pestaña de Plantillas
Pulsais sobre Personalizar en la plantilla que teneis elegida
Vais a la pestaña Avanzado y a Añadir CSS

Aqui podreis pegar el código tal cual, aunque podrían haber hecho un uploader para subirte tus propios archivos .CSS.

martes, 10 de septiembre de 2013