login

Resaltador de Sintaxis en Tumblr

Ésta es una modificación muy sencilla a la plantilla de nuestro tumblr para mostrar códigos de diferentes lenguajes y hacer que sean facilmente legibles.

Lo primero que tenemos que hacer es agregar los siguientes scripts antes de la etiqueta en nuestra plantilla:

<script type="text/javascript" src="http://shjs.sourceforge.net/sh_main.min.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_css.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_html.min.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_java.min.js">
</script>
<link type="text/css" rel="stylesheet" href="http://shjs.sourceforge.net/sh_style.css">

luego debemos agregar una clase css para que el código se muestre correctamente en nuestra plantilla:

pre {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     word-wrap: break-word;
}

y por último en nuestra plantilla cambiaremos la etiqueta por lo siguiente:

<body onload="sh_highlightDocument();">

Guardamos los cambios en nuestra plantilla para que los cambios que hicimos queden ahí.

De ahora en adelante, cada vez que querramos ingresar código para mostrarlo de forma correcta debemos designarlo con la clase 

 correcta, por ejemplo: 



<pre class = "sh_java">
Para mostrar java 
</pre>

<pre class = "sh_css">
Para mostrar CSS
</pre>

<pre class = "sh_html">
Para mostrar html 
</pre>




En la página oficial del resaltador de sintaxis que estamos utilizando, se pueden ver otros lenguajes. Yo les dejé aquí los más comunes. Pero se puede agregar el resaltador de sintaxis para ruby, php... y muchos más. Vean la página de SHJS para ver más detalles. 



Espero que les sea de utilidad.