lunes, 20 de febrero de 2012

resaltador de sintaxis para blogger

Ya hace un tiempo les presentaba una solución para mostrar el código fuente en nuestras entradas de Blogger, lo que hacíamos era escapar los tags html y mostrar el código fuente en "crudo", ahora...

Nunca esta demás tener todo prolijito y separar nuestro código fuente del resto del texto, así todo bien ordenado y diferenciado es más agradable a la vista de nuestros lectores, después de tanto buscar una solución agradable a mi propósito descubrí el script de Alex Gorbatchev, "SyntaxHighlighter" uno de los más extendidos en blogs de programación,

lo primero que tenemos que hacer es seguir estos sencillos pasos que traduje de la página http://heisencoder.net/

Antes que nada vamos a nuestro panel de Blogger -> "Diseño" -> "Edición de HTML" y procedemos,
  1. Ir a esta página y copiar el código http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
  2.  Pegar el código CSS anterior en el bloque de estilos de nuestro html que se encuentra entre las etiquetas
    <b:skin><![CDATA[/*
    y
    </b:skin>).
  3.  incluir el sig. código antes del tag </head>
    <!-- Add-in CSS for syntax highlighting --> 
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>  
     <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>  
     <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>  
     <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>  
     <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>  
     <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>  
        <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>  
    
    (Podemos borrar algunas lineas que no usemos por ejemplo si solo vamos a mostrar código fuente en PHP o HTML borramos el resto de las llamadas innecesarias a las demás librerías)


  4. Colocar el sig. código antes del tag </body>

      <!-- Add-in Script for syntax highlighting -->  
        <script language='javascript'>  
        dp.SyntaxHighlighter.BloggerMode();  
        dp.SyntaxHighlighter.HighlightAll('code');  
        </script>  
    

  5. Tocamos el botón "VISTA PREVIA", si todo va bien, tocamos "GUARDAR PLANTILLA"
  6. El último paso: cuando generemos una entrada, tocamos en el editor la solapa con la opción "Edición de HTML" donde colocaremos entre estos tags nuestro código HTML escapado
    (Podemos facilitar el escapado de tags con esta herramienta SimpleCode on-line)

  7. <pre name="code" class="cpp">  
        ...Tu html escapado aquí...
    </pre>
    
Reacciones:

1 comentarios:

Mario GAP dijo...

como podria poner un scrollbar ??