sábado, 25 de febrero de 2012

Agregar Sintax Highlighting a blogger o a web

Desde que conocí el concepto de "sintaxhighlighting" y lo vi funcionando en un editor de algún lenguaje - el primero que conocí lo vi en el editor de c++ de Borland en modo texto... ¡uy nostalgia! - me dí cuenta que era una de esas herramientas para desarrolladores que difícilmente podría dejar de utilizar. Te cambia completamente el panorama de haber escrito programas en editores planos, aburridos y sin chiste. Los desarrolladores pasamos horas y horas a veces en frente de una pantalla de algún editor, es gratificante cualquier cosa que pueda hacer más llevadero este tiempo, sobre todo si se está programando algún módulo o sistema engorroso o enfadoso.

En la actualidad cualquier editor de texto pueda considerarse medianamente decente tiene la opción para hacer resaltado de sintaxis (sintaxis highlighting) de los archivos fuentes más comunes (c, c++, java, php, basic, html, xml, c#, etc). Conste que hablo de editores de texto planos, los procesadores de texto son otro cuento muy diferente.

Al poco tiempo el resaltado también se ha utilizado en las páginas web, y no había razón alguna porque aquí en ésta bitácora no hiciéramos uso de esta notable herramienta.

Aquí una manera muy sencilla de implementación para Blogger que a su vez puede utilizarse en cualquier página web que estén desarrollando. Esta es la alternativa que estoy usando por cierto:

Tutorial usar Syntax Highlighting en Blogger

Ésta alternativa se puede utilizar para cualquier página que estén desarrollando, definitivamente creo el syntax highlighting se ve bien.

Aqui un ejemplo de como se ve y a la vez de como se puede usar en una página html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>

  <head>
      <base href="http://alexgorbatchev.com/"/>
    <title>SyntaxHighlighter - Feature Demo</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
 
    <link href='/SyntaxHighlighter/css/main.css' rel='stylesheet' type='text/css' />
  <link href='/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
  <link href='/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css' />
  <script src='/pub/sh/current/scripts/XRegExp.js' type='text/javascript'></script>
  <script src='/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
  <script src='/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>
  <script src='/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
  <script src='/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
  <script src='/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
  
  </head>
  <body class='no_sponsor'>
    
    <div id='content'>
      
      
      <h3 id='source'>Source</h3>
      <pre class='brush: plain'>
       <pre class="brush: php; highlight: [5, 15]; html-script: true">
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title>
       </head>
      
       <body>
      
       <?
       /***********************************
        ** Multiline block comments
        **********************************/
      
       $stringWithUrl = "http://alexgorbatchev.com";
       $stringWithOutUrl = 'hello world';
       
       ob_start("parseOutputBuffer");  // Start Code Buffering
       session_start();
       
       function parseOutputBuffer($buf) {
        global $portal_small_code, $portal_gzcompress;
        global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
      
        // cleaning out the code.
        if($portal_small_code && !$portal_gzcompress) {
         $buf = str_replace(" ", "", $buf);
         $buf = str_replace("\n", "", $buf);
         $buf = str_replace(chr(13), "", $buf);
        }
       }
      
       ?>
      
       <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -->
      
       </body>
       </html>
       </pre>
      </pre>
      <h3 id='result'>Result</h3>
      <pre class='brush: php; highlight: [5, 15]; html-script: true'>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title>
       </head>
      
       <body>
      
       <?
       /***********************************
        ** Multiline block comments
        **********************************/
      
       $stringWithUrl = "http://alexgorbatchev.com";
       $stringWithOutUrl = 'hello world';
       
       ob_start("parseOutputBuffer");  // Start Code Buffering
       session_start();
       
       function parseOutputBuffer($buf) {
        global $portal_small_code, $portal_gzcompress;
        global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
      
        // cleaning out the code.
        if($portal_small_code && !$portal_gzcompress) {
         $buf = str_replace(" ", "", $buf);
         $buf = str_replace("\n", "", $buf);
         $buf = str_replace(chr(13), "", $buf);
        }
       }
      
       ?>
      
       <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -->
      
       </body>
       </html>
      </pre>
      <script src='/SyntaxHighlighter/scripts/main.js' type='text/javascript'></script>  
    </div>
    <div id='clear'></div>    
   
  </body>

</html>


Hay muchas otras alternativas, esta sólo es una de ellas pero espero les sea útil... ¡¡¡saludos javer@s!!!