Mostrar 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.
(SyntaxHighlighter también sirve para mostrar código fuente resaltado en cualquier web)

SyntaxHighlighter 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”, 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 language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.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:

LenguajeCon que nombres se deben utilizar Que archivo se bebe incorporar
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.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:
public class Main {

    public static void main(String[] a3d) {
        System.out.println("SoloInformaticaYAlgoMas.blogspot.com");
    }
}


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.

Publicar un comentario