Códigos Fuentes en Blogger: SyntaxHighlighter

Si tienes un blog donde muestres códigos fuentes sea css, c#, c++, Java, PHP, html, etc. y quieres darle ese estilo enumerado que tienen los software que se usan para programar y así darle un aspecto mas de código, ademas que se vean ordenado y resaltado por colores. Gracias a SyntaxHighlighter podemos hacer esto y no solo eso sino que también tiene diferentes plantillas en diferentes colores para que combine con el diseño de nuestro blog.

SyntaxHighlighter nos tiene una versión ya alojada en sus servidores para que podamos agregarlo a nuestro Blog, pero si queremos subirlo a un host propio podemos descargar el paquete por acá:

http://alexgorbatchev.com/SyntaxHighlighter/download/

Nosotros trabajaremos con la versión ya alojada y es muy simple de agregar si seguimos las instrucciones al pie de la letra.



1.- Entramos a Plantilla > Editar HTML estando ahí damos clic a cualquier parte del código que se ve y
apretamos Ctrl + F y así podemos hacer una búsqueda, buscamos:

</head>

y arriba de esta etiqueta pegamos lo siguiente:

<!--SYNTAX HIGHLIGHTER INICIO-->
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER FIN-->

2.- Debemos de ingresar todas las sintaxis de código que utilizaremos, podemos borrar algunas líneas  de la 5 a la 13 o adicionar aquí mismo los lenguajes que utilizaremos, a continuación vemos todos los lenguajes que soporta SyntaxHighlighter:

Lenguaje	Con que nombres se deben utilizar	Que archivo se bebe incorporar
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Por ejemplo si queremos publicar código Phyton según la columna 3 de la tabla deberemos de adicionar la siguiente línea:

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script>

En otras palabras lo que haremos es en el link "http://alexgorbatchev.com/pub/sh/current/scripts/Archivo.js"
cambiaremos la palabra Archivo.js por el que corresponda al lenguaje segun la columna numero 3.

3.- Para que  funcione debemos abrir la edicion HTML de nuestra entrada y colocar el código entre las etiquetas <pre> de la siguiente manera

<pre class="brush: TIPO">
// Código aquí
</pre>

En donde deberás reemplazar "TIPO" por el nombre del lenguaje que estás destacando.

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 &lt; y &gt; respectivamente, todo esto para no confundir al código html.

Si ya te esta funcionando te podrás dar cuenta que sale un signo de interrogación y al dar clic a este nos abre una ventana con los créditos del autor:

Para quitar este signo debemos cambiar los estilos en el código que insertamos antes del </head> buscamos la linea:

<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>

y la sustituimos por:

<link href='https://dl.dropboxusercontent.com/u/5655242/Syntax/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

guardamos cambios y listo ya no estará ese icono.