Cómo mostrar código fuente en nuestras Webs con Syntax Highlighter

1
22949

Cómo mostrar código fuente en nuestras Webs

Internet esta lleno fragmentos de código fuente en lenguajes como CSharp, Java, Javascript, php, SQL, Python, VB, etc.

Pues bien, en este tutorial os voy a presentar la librería SyntaxHighLighter, una librería reálmente útil para incrustar código fuente en nuestras Webs resaltándolo sintácticamente con distintos colores.

¿Cómo funciona?

Pues tan fácil, simplemente debemos:

  1. Importar en nuestra web las librerías de javascript y la css. Existe una .js para cada lenguaje de programación.

    Por ejemplo, para Java y PHP necesitaría las siguientes líneas:

                <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
                <script language="javascript" src="/wp-content/uploads/tutorial-data/js/shCore.js"></script>
                <script language="javascript" src="/wp-content/uploads/tutorial-data/js/shBrushJava.js"></script>
                <script language="javascript" src="/wp-content/uploads/tutorial-data/js/shBrushePhp.js"></script>                    
            

  2. Insertar nuestro código dentro de tags <pre> o <textarea>

                  <pre name="code">
                      // ... El código fuente ...
                  <pre>          
              

  3. Asignarles un nombre a través del atributo «name»
  4. Especificar en que lenguaje de programación está el contenido a formatear.
  5. Especificar parámetros de configuración separados por el caracter «:»

  6. Incluir el siguiente código javascript (preferiblemente en la sección head):
    
    <script type="text/javascript">
        window.onload = function() {
          dp.SyntaxHighlighter.HighlightAll("code");
        }
    </script>
    
    
    

    Observe que le indicamos el nombre que especificamos en el segundo paso.

Algunos ejemplos

Resaltamos un pequeño fragmento de código Java:

Código HTML del ejemplo Resultado obtenido
            
<textarea name="code" class="java:nogutter" rows="5" cols="80">
  package com.autentia.tutoriales.sintaxis;
  
  import java.util.Vector;
  import org.apache.log4j.Logger;
  import org.apache.log4j.xml.DOMConfigurator;
  
  /**
   * Ejemplo del uso de la librería
   * @author Carlos García. Autentia.
   * @see http://www.mobiletest.es       
   */
  public class CarlosGarciaDemo {
      /**
       *  Punto de inicio de la aplicación. 
       */
      public static void main(String args[]) {
          int factorial = 1;
          
          try {
              for (int i = 10; i != 1; i--){
                  factorial *= i;
              }
  
              System.out.println("El factorial de 10 es: " + factorial);
          } catch (Exception ex) {
              System.out.println("Error: " + ex);
          }
      }
  }
</textarea>

Ahora resaltamos un pequeño fragmento de código PHP

Código HTML del ejemplo Resultado obtenido
<pre name="code" class="php:nocontrols">
    <?php
        define(NUMERO, 10);
        
        echo "Hola desde PHP !!!";            
        echo "El factorial de " . NUMERO . " es " . getFactorial(10);
        
        /**
         * Calcula el factorial de un número
         */                         
        function getFactorial($num){
            $factorial = 1;
            for ($i = 10; $i != 1; $i++){
              $factorial *= $i;
            }
            return $factorial;
        }
    ?>
</pre>
                
        <?php
            define(NUMERO, 10);
            
            echo "Hola desde PHP !!!";            
            echo "El factorial de " . NUMERO . " es " . getFactorial(10);
            
            /**
             * Calcula el factorial de un número
             */                         
            function getFactorial($num){
                $factorial = 1;
                for ($i = 10; $i != 1; $i++){
                  $factorial *= $i;
                }
                return $factorial;
            }
        ?>
    

Ahora resaltamos un pequeño fragmento de XML

Código HTML del ejemplo Resultado obtenido
<pre name="code" class="xml:nogutter:nocontrols">
    <?xml version="1.0"?>
    <persona>
        <firstname>Carlos</firstname>
        <lastnames>García Pérez</lastnames>
        <age>30</age>
    </persona>        
</pre>
                
                    
                        Carlos
                        García Pérez
                        30
                            
                

Conclusiones

Desde mi punto de vista me parece una librería realmente útil, que nos permite distribuir el conocimiento de manera sencilla,
pudiendo ahorrar un considerable ancho de banda, como por ejemplo a través del uso de etiquetas de las formateo tradicionales <font name=’…’>…..</font>. Aunque debe pensar que los .css y .js de la librería tienen también un peso.

Recuerde que esto es sólo una introducción, para más información consulte la web del proyecto.

Desde aquí deseo felicitar a los autores por su esfuerzo y trabajo realizado ;-).

1 COMENTARIO

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad