17may2010

Publicar código fuente

  1. Más que una entrada novedosa, ésta entrada servirá como referencia propia al momento de publicar código fuente. Espero también sea de ayuda para otras personas que busquen la misma solución para su Blog.Para agregar el script de resaltado de código fuente (SyntaxHighlighter) en nuestro Blog seguimos los siguientes pasos:
  2. Ir a la dirección de GoogleCode de SyntaxHighlighter. Copiar todo el código mostrado.
  3. Pegar la información al final de la sección de estilos CSS de la plantilla de nuestro blog (entre la etiqueta <b:skin><!--[CDATA[/* y la etiqueta ]]--></b:skin>).
  4. Antes de la etiqueta </head>, pegue lo siguiente:
  5. <!-- 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>
    Puede eliminar las líneas que hagan referencia a los lenguajes que no usará; esto permitirá una carga más rápida.

  6. Antes de la etiqueta </body>, pegue lo siguiente:
  7. <!-- Add-in Script for syntax highlighting -->
    <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  8. Use el botón "Vista previa" para asegurarse de que el Blog se ve correctamente. Si la previsualización es correcta guarde la plantilla.
  9. Para publicar código fuente, seleccione la pestaña "Edición de HTML" e inserte lo siguiente:
  10. <pre name="code" class="nombre_lenguaje">
    ...Código fuente a ser publicado en código "escaped HTML" ...
    </pre>
    Puede verificar la lista de "nombre_lenguaje" disponibles aquí .
    El código "escaped HTML" puede ser generado por varias herramientas disponibles en la red que pueden ser ubicadas al realizar la búsqueda de "html escaper", o se puede usar la herramienta Quick Escape usada en la publicación de este blog.
    Fuente:
    Adding Syntax Highlighting to Blogger

0 comentarios:

Publicar un comentario