Sintax highlighter - Script para dar formato al código fuente en muchos lenguajes: PHP, SQL, C#, HTML etc ..

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Sintax Highliter es una muy buena opción, si no la mejor, para poder dar formato a código fuente en una página, aplicación web, CMS, blog o foro, como por ejemplo Wordpress, Joomla, Drupal, etc .., o un sitio web programado y diseñado por nosotros.

Con este script podrás formatear el código de muchos lenguajes de programación, muy útil para webs y sitios que expongan ejemplos de código, foros de programación de software y desarrollo de aplicaciones web, blogs con artículos, etc ..

Además es muy fácil de instalar y es completamente gratuito. A continuación puedes ver una guía que explica el funcionamiento, características e instalación.

Mas información sobre el programa.

Indice del contenido

  1. Lenguajes de programación soportados.
  2. Instalación y funcionamiento.
  3. Temas.
  4. Opción para ver código fuente, imprimir y copiar.
  5. Otros parámetros de configuración.
  6. Integrar el script con diferentes CMS, foros y blogs.
  7. Sitios que utilizan actualmente este script.
  8. Licencia

 

1 - Lenguajes de programación soportados.

Los principales lenguajes a los que podrás aplicar el formato para la sintaxis son:

Actionscript, vb.net, c-sharp ( c# ), visual basic, Javascript, Java, HTML, CSS, SQL, PHP, Perl, XML, Delphi, JavaFX, PowerShell, Python, Ruby, Scala.

Nota: En este enlace puedes ver una lista con todos los lenguajes soportados y los NO soportados.

2 - Instalación y funcionamiento.

Para formatear cada lenguaje, se utiliza un archivo Javascript específico. Por ejemplo para dar formato a código XML se utiliza el script shBrushXml.js, para CSS shBrushCss.js, para C# shBrushCSharp.js. Cada uno de estos archivos se encuentran en la carpeta scripts.

Para ponerlo en marcha, solo basta con linquear o hacer referencia al script en la sección HEAD del documento HTML, por ejemplo:

También se añade el script principal ( shCore.js )

Luego, para aplicar el formato a un bloque de código fuente, hay que añadir un atributo CLASS dentro de una etiqueta <PRE></PRE>, con el valor Brush y el nombre del lenguaje a utilizar.

Nota: también, además de utilizar la etiqueta PRE de HTML, es posible colocar el código dentro de la etiqueta <script>. Se recomienda utilizar este método. Para ver como aplicarlo y porque es conveniente utilizarlo, puedes leer este tutorial de instalación en la web del autor.

Por ejemplo para dar formato en C#, el valor en CLASS sería: brush: c-sharp.

El resultado:

Para código CSS el valor de CLASS, brush: CSS

El resultado:

Para código PHP, el valor de Class sería, brush: PHP

Resultado:

Nota: el método o función javascript que aplica el formato al código fuente es SyntaxHighlighter.all.

A continuación puedes ver una lista con todos los valores que puedes utilizar en el atributo Class para definir cada lenguaje:

Lenguaje CLASS
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
c++ cpp, c
css css
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
JavaScript js, jscript, javascript
Java Java
JavaFX jfx, javafx
Perl Perl, pl
PHP PHP
Texto plano plain, text
PowerShell PowerShell, ps
Python Python, py
Ruby Ruby, ror, rails
Scala Scala
sql sql
Visual Basic vb, vbnet
xml xml, xhtml, xslt, html, xhtml

3 - Temas.

Otra posibilidad y ventaja, es la de aplicar temas para la apariencia visual mediante archivos CSS, muy útil para seleccionar un estilo que se adapte lo mejor posible a los colores y contraste de nuestro sitio web.

A continuación puedes ver 2 de ellos. ( son 8 motivos )

Este es el tema utilizado por defecto.

Tema oscuro.

Para aplicar un tema, es muy simple. Dentro de la carpeta Styles se encuentran los temas ( son 8 archivos CSS).

  • Default: shThemeDefault.css
  • Django: shThemeDjango.css
  • Eclipse: shThemeEclipse.css
  • Emacs: shThemeEmacs.css
  • Fade To Grey: shThemeFadeToGrey.css
  • Midnight: shThemeMidnight.css
  • RDark: shThemeRDark.css

Para aplicarlo, simplemente con linquear y hacer referencia a cualquiera de estos archivos, podremos cambiar la apariencia.

Por ejemplo, en la sección HEAD de la página, si queremos aplicar el tema Eclipse ( archivo shThemeEclipse.css), deberemos incluir la siguiente línea en el código fuente de la página.

Nota importante: el script, además de la hoja de estilo para el tema, requiere incluir el archivo shCore.css

4 - Opción para ver código fuente, imprimir y copiar.

También, nos da la posibilidad, cuando el usuario despliegue el mouse encima del área donde esté el código, mostrar un pequeño toolbar con 3 botones para:

  1. Copiar el código fuente al portapapeles
  2. Imprimir el código.
  3. Ver el código sin formato, es decir en texto plano.

Captura de pantalla de la barra de herramientas con los botones de opción:

5 - Otros parámetros de configuración.

Editando el archivo SyntaxHighlighter.defaults, se pueden configurar varias opciones generales, por ejemplo:

  • auto-links : Es un valor boolean. Si esta opción se encuentra en True, los enlaces o url dentro del bloque de código se detectarán, de lo contrario se mostrará como texto plano.
  • class-name : Es un valor de cadena. Permite utilizar definir el nombre de clase para dar el formato. También pueden añadirse varios nombres. por defecto se utiliza el valor Brush, pero como se mencionó podrían ser varios, por ejemplo: <pre class="brush: php; class-name: 'class_name_demo'">
  • collapse : Esta opción es muy útil si necesitamos que el bloque de código se muestre en forma contra´da para que no ocupe espacio, sobre todo para grandes bloques de código. Por defecto el valor es False, es decir que el bloque de código se visualizará completamente. Si se encuentra en True, se mostrará un botón "Ver y expandir código fuente" para el usuario de la página haga clic y lo muestre.
  • gutter : Si no queremos visualizar los números de línea al costado izquierdo del código fuente, podemos colocar este parámetro con el valor False. Por defecto se encuentra en True y los números se mostrarán.

Nota: la descripción completa de todas la opciones, así como también un ejemplo de demostración de los parámetros del archivo de configuración, se encuentran explicadas en esta página en la web del autor.

6 - Integrar el script con diferentes CMS, foros y blogs.

Este programa javascript se puede integrar con varios cms y aplicaciones webs. En el sitio oficial en la sección de ayuda, encontrarás manuales y tutoriales de como realizar la instalación y configuración en cada uno de ellos.

  • Wordpress.
  • Blogger.
  • BlogEngine.NET
  • Drupal.
  • Joomla.
  • MediaWiki.
  • Ruby on Rails
  • Foro SMF.
  • vBulletin.
  • Varios otros.

7 - Sitios que utilizan actualmente este script.

Este programa es muy popular e implementado en la actualidad por muchos sitios webs. A continuación puedes ver algunos portales:

8 - Licencia

Sintax highlighter es completamente gratuito ( Software libre distribuido bajo licencia LGPL ).


Requerimientos de instalación y uso.

Lenguaje: Javascript


Videos tutoriales.

No hay mas imágenes

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
alexgorbatchev.com
Licencia:
Gratis - Software libre - LGPL
Versión:
3.0.83
Idioma:
Español
Programa actualizado:
12 NOV 2010


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: