Despues de buscar y probar muchas opciones para colorear codigo fuente en blogger sin tener que modificar la plantilla o arriesgarse a que post anteriores que tienen codigo con las etiquetas PRE Y CODE se alteren y queden ilegibles, encontre una alternativa que parece bastante sencilla de usar, es
Highlight, este es un programa que convierte el codigo fuente en texto con formato, soporta varios lenguajes, esta disponible para windows como linux y lo mejor, es gratis. SI quieres saber mas, visita su web
http://www.andre-simon.de
¿COMO USARLO EN BLOGGER?
Paso 1: bajate el programa e instalalo o si prefieres más abajo te dejo un portable que hice.
Paso 2: Con la aplicacion abierta, en la parte superior izquierda, tienes dos pestañas FILE y CLIPBOARD.
File: Esta opcion te permite cargar un archivo que tengas en tu pc, el programa detecta automaticamente el lenguaje.
Clipboard: esta opcion te permite realizar un copy/paste directamente de tu aplicacion IDE.
Configuraciones: esta opcion se encuentra en la parte inferior izquierda
En la pestaña GENERAL, habilita las opciones Add Line Numbers (agrega numeracion a las lineas de codigo), Pad with zeroes (coloca ceros en los numeros), validate input data (valida datos de entrada).
En OUTPUT FORMAT (formato de salida) escoge HTML.
En la pestaña OUTPUT SPECIFIC busca la opcion STYLESHEETS y habilita las opciones EMBED STYLE (CSS) e Inline CSS.
Por ultimo en la pestaña FORMATTING, puedes escoger el color del theme que utilizaras, eso ya depende de los gustos de cada quien, yo me quedo con el formato de visual studio 2008.
Tambien tiene otras opciones interesantes, TAB WIDTH te permite especificar que tamaño en caracteres tendra la tecla TAB, la opcion LINE WRAPPING especifica el numero de columnas y tambien puedes modificar el tamaño de la fuene y el tipo.
Continuemos, cuando ya tengas el codigo cargado (paso 2), con la opcion FILE, presiona COPY FILE TO CLIPBOARD, si utilizaste la opcion CLIPBOARD, presiona COPY PREVIEW TO CLIPBOARD, abre el notepad y pega ese codigo, no lo pegues directamente en blogger.
Como se ve en la imagen, el programa crea todo el codigo fuente ya formateado, solo nos interesa lo que este entre las etiquetas PRE, borra el resto.
para personalizar un poco mas nuestro codigo, añade este contendor DIV, antes y despues de las etiquetas PRE, dependiendo de la extension de tu codigo, puedes editar el tamaño HEIGHT de acuerdo a tus necesidades.
01 <div style="overflow: auto; height: 400px; background: none repeat scroll 0% 0% rgb(255, 255, 255);">
02 aqui el codigo
03 </div>
debes tener algo como:
Ahora si, ya puedes pegar este codigo en el editor de blogger
Ejemplos
PHP
01 <?php
02 echo "Hola Mundo";
03 ?>
C#
01 namespace HelloNameSpace
02 {
03 public class HelloWorld
04 {
05 static void Main(string[] args)
06 {
07 Console.WriteLine("Hola Mundo!");
08
09 }
10 }
11 }
Java
01 public class HolaMundo
02 {
03 public static void main (String [ ] args)
04 {
05 System.out.println ("Hola mundo");
06 }
07 }
¿Facil no?
La web del program es
http://www.andre-simon.de/index.html
También te dejo el portable por si no quieres instalar nada en tu pc, no pesa nada
EXE Portable
Enlace actualizado 18 de enero de 2013
0 comentarios:
Publicar un comentario