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

7 comentarios:

Anónimo dijo...

Mmm... no me funciona. Podría estar mal el script?
Y... quisiera trabajar con códigos de R (r-project), utilizo c++ o hay algún otro lenguaje que me sirva?
gracias

Jimmy dijo...

hola que tal =), dudo mucho que sean los scripts ya que tengo tiempo viéndolos funcionar bien, lo que podría ser es algún detalle que se me aya o se te aya pasado al agregar estos al head de tu plantilla. Sea cual sea el caso, mira aquí te anexo mi plantilla principal para que hagas comparaciones y podamos ver cual fue el detalle, te parece bien =).

http://rapidshare.com/files/433126041/plantilla_principal.html.tar.gz

Saludos y mucha suerte amigo =)

zitonguito dijo...

gracias funciona muy bien solo tuve un problema ya que la plantilla de blogger no me lo aceptaba pero solo era cuestion de quitar todas las comillas dobles ("), las quitas pegas justo debajo de \ y listo

zoeosvaldo dijo...

que tal man, tengo una duda en donde se inserta la etiqueta "pre" ahi un lugar especifico o al fregaso; saludos

Jimmy dijo...

Hola zoeosvaldo que tal, con respecto a tu duda acerca del código "pre", es una palabra reservada especial para el syntax highlighting y se utiliza como cualquier tag de html, así como utilizas el tag anchor de html ( "a href="..."> texto "/a") de igual forma ingresaras el código "pre" en tu código fuente html (ej: "pre" class="brush: html"> "mi código a resaltar "/pre" [sustituye esas comillas por sus respectivas llaves angualres <,> :)] ).
OJO, en la propiedad brush (brush: html) puedes sustituir "html" por java, xml, cpp, python, perl, según el lenguaje que necesites resaltar.
espero haber podido resolver tu duda saludos zoeosvaldo.

Pedro Cardoso dijo...

Justo hace unas semanas necesitaba esta info y me ayudo bastante, paso de nuevo para agradecer, ojala puedas retomar y publicar mas cosillas, saludos.

Unknown dijo...

Muchas gracias por los scripts.