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:
- 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:
1234<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>
123<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
):
1234567<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 | ||
---|---|---|---|
|
Ahora resaltamos un pequeño fragmento de código PHP
Código HTML del ejemplo | Resultado obtenido | ||||
---|---|---|---|---|---|
|
|
Ahora resaltamos un pequeño fragmento de XML
Código HTML del ejemplo | Resultado obtenido | ||||
---|---|---|---|---|---|
|
|
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 ;-).
Muy útil, gracias.
pd/ El enlace de más información está caido.