Mostrar código fuente en mi blog

SyntaxHighlighter es una librería completa desarrollada en JavaScript , la cual te permite resaltar código (syntax highlight) ,es decir , darle un aspecto visual mucho más agradable a un fragmento de código incrustado en un sitio web, blog, etc.

Ejemplo de como se veria un codigo escrito en Java en tu web

package miproyecto;

/**
 *
 * @author Carlos
 */
public class Main {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // TODO code application logic here
        System.out.println("Me gusta Java");
    }
}

Como añadir SyntaxHighlighter

a) en mi web

1) Agrega las siguientes lineas dentro del head de tu web

 
<link type="text/css" rel="stylesheet" href="http://www.gmlo.herobo.com/SH/styles/shCoreDefault.css"/>

En este caso, solo he agregado al head , los scripts para mostrar código de JavaScript(hBrushJScript.js) y codigo de Java (shBrushJava.js) , si deseas puedes agregar otros scripts , la lista completa de lenguajes esta aquí .

2) Ahora agrega el código que quieres mostrar en tu web entre las etiquetas <pre> </pre> en el body de tu web de la siguiente manera

<pre class="brush: js;">
// escribe todo el código que quieres mostrar
function hello()
{
 return "hello world!";
}
</pre>

Como puedes observar , al bloque <pre></pre> le añadimos la clase class="brush: js;" que indica que el código que queremos mostrar en nuestra web es JavaScript(js), en el caso de java seria : class="brush: java;" , la lista completa la tienes aqui


b) en blogger

Si tienes una cuenta en blogger (nombredetublog.blogspot.com) ve hacia Diseño -> Edición de HTML y agrega las siguientes lineas antes de </head>

Ahora buscamos la etiqueta "body" y dentro de esta etiqueta colócalos el siguiente código:

Finalmente agrega el código que quieres mostrar en tu blog entre las etiquetas <pre > </pre> en cada entrada que desees.

Nota. Si queremos publicar código xml, xhtml, xslt, html y xhtml debemos considerar que dentro de las etiquetas pre no debemos utilizar los caracteres < ni > en vez de ello utilizaremos < y > respectivamente, todo esto para no confundir al código html.