Mostrando código fuente en entradas de blogger

Si quieres mostrar código fuente de algún lenguaje de programación en tu blog de Blogger y que éste se vea llamativo, con formato, resaltado con colores y mas, para ello nos ayudará SyntaxHighlighter que es un resaltador de código desarrollado en JavaScript y es código libre, es uno de los mejores resaltadores, en su página oficial se lo encuentra para descargarlo y adicionarlo a tu web.

Este programa tiene una versión online para usarla, puesto que Blogger no nos ofrece la posibilidad de subir archivos, utilizaremos la versión online.

Primero accedemos al diseño de nuestro blog en Blogger, nos vamos a la pestaña de “Edición de HTML”, para ello nos vamos a plantilla y justo a la derecha de personalizar aparece "Editar HTML"

Esto nos mostrara el código HTML de nuestro blog y buscamos la etiqueta “HEAD” dentro de ahí copiamos el siguiente código:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!--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/<span class="IL_AD" id="IL_AD11">clipboard</span>.swf"; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER FIN-->

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 Visual Basic según la columna 3 de la tabla deberemos de adicionar la siguiente línea:

?

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

Para usar la sintaxis deberemos de encerar todo el código que queremos publicar con las etiquetas “pre” por ejemplo si queremos insertar código java la llamaríamos como nos dice en la columna 2 de la tabla, seria de la siguiente manera:

?

1 2 3 4 5 6 7 8

<pre class="brush: java"> public class Main {     public static void main(String[] a3d) {         System.out.println("SoloInformaticaYAlgoMas.blogspot.com");     } } </pre>

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.