Tutoriales

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

Por

11 octubre, 2007

22660

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.

Índice de contenidos

¿Cómo funciona?
Algunos ejemplos
Conclusiones

¿Cómo funciona?

Pues tan fácil, simplemente debemos:

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:



		
		
			
			
Shell
			
			            <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>                    
			
				
					
				
					1
2
3
4
				
						            <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>

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




		
		
			
			
Shell
			
			              <pre name="code">
                  // ... El código fuente ...
              <pre>          
			
				
					
				
					1
2
3
				
						              <pre name="code">
                  // ... El código fuente ...
              <pre>

Asignarles un nombre a través del atributo «name»
Especificar en que lenguaje de programación está el contenido a formatear.
Especificar parámetros de configuración separados por el caracter «:»
Incluir el siguiente código javascript (preferiblemente en la sección head):

Shell

<script type="text/javascript"> window.onload = function() { dp.SyntaxHighlighter.HighlightAll("code"); } </script>

1
2
3
4
5
6
7

<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" <strong>class="java:nogutter"</strong> 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>

<textarea name="code" <strong>class="java:nogutter"</strong> 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" <strong>class="php:nocontrols"</strong>>
    <?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>

<pre name="code" <strong>class="php:nocontrols"</strong>>

<?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;
            }
        ?>

<?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" <strong>class="xml:nogutter:nocontrols"</strong>>
    <?xml version="1.0"?>
    <persona>
        <firstname>Carlos</firstname>
        <lastnames>García Pérez</lastnames>
        <age>30</age>
    </persona>        
</pre>

<pre name="code" <strong>class="xml:nogutter:nocontrols"</strong>>

<?xml version="1.0"?>

<firstname>Carlos</firstname>

<lastnames>García Pérez</lastnames>

</persona>

</pre>

                        Carlos
                        García Pérez
                        30

Carlos

García Pérez

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 ;-).

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

Cómo mostrar código fuente en nuestras Webs

¿Cómo funciona?

Algunos ejemplos

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

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

Ahora resaltamos un pequeño fragmento de XML

Conclusiones

1 Comentario

Dejar respuesta Cancelar respuesta

Envíanos tu tutorial

Cómo mostrar código fuente en nuestras Webs

¿Cómo funciona?

Algunos ejemplos

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

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

Ahora resaltamos un pequeño fragmento de XML

Conclusiones

Artículo relacionadosMás del autor

Web3 para principiantes

Como usar NPM y no morir en el intento

gRPC explicado con ejemplos (servidor y cliente)

Cómo eliminar commits de la rama master con GIT

Eventos con Spring Framework

1 Comentario

Dejar respuesta Cancelar respuesta

Envíanos tu tutorial

Artículo relacionados Más del autor