martes, 17 de noviembre de 2009

Resaltado de Sintaxis (syntax highlighting) para tu blog o sitio web

jeje bueno esta ves dados los comentarios por messenger sobre como le hice para que el código de mi blog se mostrara de una forma resaltada y también que cuando se le da un clic a la parte superior derecha aparezca un botonsito para que se copie el código en el porta papeles pues... aquí les muestro como lo lleve acabo.


Por cuestiones practicas lo dividiré en dos puntos, el primero lo llamare "Edición de plantilla" y el segundo "inserción de etiquetas", si a alguien no le parece pues... ahí esta el departamento de quejas jejejeje no se crean no hay xD jeje


Ahora si 1ra Parte

EDICIÓN DE PLATILLA

Primeramente me posicione en la pestaña de diseño de mi plantilla




e insertamos justo debajo de donde dice <head> este codigo:


<link href="'http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css'" rel="'stylesheet'" type="'text/css'/">
<link href="'http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css'" rel="'stylesheet'" type="'text/css'/">
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js'" type="'text/javascript'"></script>
<script src="'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js'" type="'text/javascript'"></script>
<script language="'javascript'">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

aclaro como verán cada archivo de esas lineas tienen una extensión .js (refiriéndose a que son archivos hechos con javascript) para que su blog no tarde mucho en cargar Solo dejen los lenguajes que vayan a utilizar, en mi caso solo deje soporte para los lenguajes csharp, Java, xml y bash.
(una lista de lenguajes soportados mas extensa se encuentra en: 'http://alexgorbatchev.com/pub/sh/current/scripts/' ;) )
por lo pronto eso es todo en cuanto a lo de edición de la platilla respecta.

2da Parte

INSERCION DE ETIQUETAS

Para esto ya es solo cuestión de encerrar nuestro código entre las etiquetas "pre" para que el código de html no lo confunda. y nos quedaría así:
ej 1:


mi codigo... java, csharp, xml.. etc etc


ej: 2:


System.println("Hola mundo");


como podrán ver para seleccionar el lenguaje con el que se coloreara nuestro código basta con escribirlo al lado de "brush: "

Esto no es difícil quisas un poco laborioso al principio pero después de hacerlo un par de veces es pan comido :).

Espero y este les sea de ayuda a la hora de querer poner su código fuente un poco mas legible en sus sitios web y/o blgs, como siempre compartan el conocimiento que a la hora de llegar a la tumba ni eso se podran llevar al otro lado ;) Saludos! :D

miércoles, 11 de noviembre de 2009

Instalando "Ubun-student"

Hola que tal, eme aquí compartiendo un nuevo aporte sobre una aplicación que me resulto muy útil a la hora de querer instalar herramientas de desarrollo como.. Eclipse 3.5, NetBeans, compiladores de intel y Gráficas para hacer ver mejor mi gestor de ventanas como Gnome Art Next Gen(que Ojo hago la observación con respecto a esta ultima aplicación, esta escrita en C# y corre bajo mono ;-P )

Ahora bien sin mas preámbulo esta es la manera como hice la instalación en mi distribución Ubuntu Desktop 9.04.

Paso 1 ( Primero lo primero, hay que descargar la llave GPG ;) )
desde terminal escribir lo siguiente:


$ wget -q http://tdt.sjtu.edu.cn/S/project/A98F68DB.gpg -O- | sudo apt-key add -


Paso 2 (Anexar repositorio)
anexar al archivo de repositorios “/etc/apt/sources.list”
el repositorio que corresponda a nuestra distribución actualmente instalada.

Para Ubuntu Hardy (8.04):
deb http://tdt.sjtu.edu.cn/S/ hardy main

Para Ubuntu Intrepid (8.10):
deb http://tdt.sjtu.edu.cn/S/ intrepid main

Para Ubuntu Jaunty (9.04):
deb http://tdt.sjtu.edu.cn/S/ jaunty main

Para Ubuntu Karmic (9.10):
deb http://tdt.sjtu.edu.cn/S/ karmic main

en mi caso fue asi:

$ echo 'deb http://tdt.sjtu.edu.cn/S/ jaunty main' >> /etc/apt/sources.list


paso 3
Ahora solo se actualizan los repositorios y se instala nuestro preciado ubun-student ;-)

$ sudo apt-get update
$ sudo apt-get install ubun-student

ya para terminar solo basta con ir al menu aplicaciones -> Herramientas del Sistema -> Ubun-Student y es todo :-).

como siempre para dudas sugerencias y/o comentarios pues quedo a la mas buena disposición para compartir el sano conocimiento :-).
Saludos! :-)