Ir al contenido principal

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:

<!--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-->
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:
<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:
<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.

Comentarios

  1. Muchísimas gracias por explicar como se instala este scrip. Llevaba varios días buscando algo como esto.

    ResponderEliminar
    Respuestas
    1. Me alegro de que te haya resultado útil tocayo,
      Un saludo!

      Eliminar
  2. Agradecido, todo funcionó como se esperaba

    ResponderEliminar
  3. Muchas gracias por el aporte, la verdad la herramienta esta muy buena pero la documentación es horrible.

    ResponderEliminar
  4. Muchas gracias por la información ... Es justo lo que necesito !!!

    ResponderEliminar
  5. como podriamos cambiar el diseño de la etiqueta pre, por ejemplo q el fondo sea gris y no blanco. la pagina lo bloquea con background: none !important;.

    Gracias por el post, de mucha ayuda

    ResponderEliminar
  6. Meknar, en el post se muestra como usar SyntaxHighLighter de manera online, por lo tanto no podemos modificar el archivo css.

    No he probado lo que dices, pero confío en que si te descargas los css y los hosteas donde quieras una vez modificados a tu gusto podrás cambiar el color del fondo y lo que quieras...

    Un saludo

    ResponderEliminar
  7. Al comienzo no funcionó

    solo basta con cambiar las etiquetas del script
    de
    < script ... />
    por
    < script ...>< script>

    Y ya me funcionó

    ResponderEliminar
  8. A mi me funciona pero no del todo bien, pongamos que por ejemplo pongo este texto:

    < p >
    < span > hola < / span >
    < / p >

    Pues me aparece el recuadro con las 3 lineas pero el codigo se me ve así:
    <
    p
    >
    <
    span
    >
    hola
    <
    /
    span
    >
    <
    /
    p
    >

    ¿A alguien se le ocurre el porque?
    Gracias.

    ResponderEliminar
  9. No funciona del todo bien. El formato llamativo y resaltado con colores no aparece por ningún lado.

    ResponderEliminar
    Respuestas
    1. Mira este enlace.. te servira
      http://site-informatica.blogspot.com/2010/08/syntaxhighlighter-muestra-codigos-en-tu.html

      Eliminar
  10. gracias por tu post me fue de gran ayuda... funciona perfecto

    ResponderEliminar
  11. no entendi bien el tutorial ... osea ademas de poner el codigo .... donde debo subir mi script ?

    ResponderEliminar

Publicar un comentario