Plugin Geshi: dar formato a código de programación en artículos Joomla. Saltos de línea. Ejemplo (CU00435A)

Resumen: Entrega nº34 del curso Creación y administración web: Joomla desde cero.
Codificación aprenderaprogramar.com: CU00435A

 

 

EJEMPLO PLUGIN GESHI PARA DAR FORMATO A CÓDIGO DE PROGRAMACIÓN DE ARTÍCULOS

Si en nuestro sitio web vamos a abordar temas relacionados con la programación, este plugin nos puede resultar de interés, en caso contrario no.

 

La finalidad del plugin “Contenido – Code Highlighter GeSHi” (Generic Syntax Highlighter o Contenido – Remarcador de código GeSHi) es detectar la sintaxis del lenguaje de programación y aplicarle un formato adecuado (colores, tipos de letra, etc.) que permita la correcta diferenciación de comandos, variables, anidaciones, etc. Para poder utilizarlo tenemos que habilitarlo en el gestor de plugins. No tenemos parámetros que configurar, simplemente requiere la activación. Geshi fue creado para PHP y a partir de ahí se ha desarrollado para decenas de lenguajes, por lo que hay unos que quedan mejor formateados que otros.

Una vez activado, tenemos que insertar el código en el artículo en la vista del código fuente HTML del artículo. Nota: es posible que sea necesario desactivar el editor (Sitio --> Configuración global --> Editor: No editor o Sin Editor) ya que escribir sobre el editor TinyMCE u otro editor más avanzado puede no resultar válido porque el editor no asimile el código. Escribiremos lo siguiente:

<pre xml:lang=”Lenguaje_de_programación”>

Aquí el código

</pre>

 

 

En “Lenguaje_de_programación” tendremos que escribir alguno de los lenguajes reconocidos por el plugin: podemos ver cuáles son accediendo al directorio donde se encuentren instalados los archivos correspondientes, dentro del directorio de Joomla: esta ruta puede ser del tipo /www/libraries/geshi/geshi ó /plugins/content/geshi/geshi/geshi según la versión que estemos usando. Si accedemos a ese directorio podremos ver que existen archivos como javascript.php, css.php, etc. Cada uno de esos archivos nos indica los lenguajes disponibles. El plugin que viene preinstalado con Joomla habitualmente reconoce sólo javaScript, css, php, sql y xml, pero es posible añadir más lenguajes como Visual Basic (vb), Java, y muchos otros.

 

 

EJEMPLO

<pre xml:lang="vb">

Option Explicit

Dim Matriz() As Integer

Dim Transitoria() As Integer

Dim i%, j As Integer

Private Sub Form_Load()

Show

ReDim Matriz(3, 3)

For i = 1 To 3

For j = 1 To 3

Matriz(i, j) = i + j

Next j

Next i

For j = 1 To 2

Matriz(i, j) = Transitoria(i, j)

Next j

Next i

</pre>

 

 

 

Lenguaje no reconocido por el plugin (Visual Basic). Vemos que no aparecen colores, el código no está remarcado.

En cambio si escribimos código SQL ya apreciamos cómo los paréntesis, palabras clave, etc. toman colores distintos.

                                Lenguaje sí reconocido por el plugin (SQL).

 

 

Para un lenguaje no reconocido por el plugin tenemos varias opciones:

a) Descargar la versión completa de GeSHi que incluye bastantes más lenguajes (más de 100, ver especificaciones) de la web http://qbnz.com/highlighter en la sección downloads. El tamaño de GeSHi completo comprimido en zip no supera 1 Mb.

 

 

Si lo descargas comprueba que hayas descargado una versión completa (en la carpeta languages encontrarás más de 100 referencias) y no una alpha ni una beta. Tras esto copia los archivos del lenguaje o lenguajes que quieras usar en la carpeta de lenguajes. En nuestro caso vamos a copiar el archivo vb.php en \www\Joomla\libraries\geshi\geshi porque estamos en este directorio, pero tú tendrás que ver la ruta (en tu ordenador o servidor) adecuada.

 

 

Este es el aspecto con vb, ahora vemos que sí aparecen ciertas partes de código en color.

Pero aún podemos encontrarnos con otro problema: que Geshi no nos respete los saltos de línea y que el código en vez de verse en distintas líneas se vea en una sola línea. ¿Por qué ocurre esto? En general por un conflicto con las plantillas Joomla y la forma de tratamiento a las etiquetas <pre> … </pre>. Si te ocurre esto y quieres solucionarlo debes hacer lo siguiente: accede al sistema de archivos de joomla y busca la ruta donde se encuentre la plantilla que estés utilizando, y dentro de ella busca la carpeta css, por ejemplo /templates/beez_20/css. Dentro de esta carpeta busca un archivo con nombre template_css.css ó template.css ó similar, guarda primero una copia de seguridad y luego edita el archivo. Encontrarás código similar a este entre otras cosas:

html {

font-size:100.1%;

}

body {

text-align:center;

font-family:tahoma, Arial, Helvetica, sans-serif;

line-height:1.4em;

margin:0;

}

... etc ...

 

 

Añade el siguiente fragmento de código para conseguir un correcto tratamiento de las etiquetas <pre> que utiliza geshi:

pre,

.code {

 white-space:normal;

 white-space: pre-wrap;

 white-space: -moz-pre-wrap;

 white-space: -pre-wrap;

 white-space: -o-pre-wrap;

 word-wrap: break-word;

 font-family:courier;

 overflow:hidden;

}

 

 

Nos quedará algo así (hemos marcado en rojo el código añadido):

html {

font-size:100.1%;

}

pre,

.code {

 white-space:normal;

 white-space: pre-wrap;

 white-space: -moz-pre-wrap;

 white-space: -pre-wrap;

 white-space: -o-pre-wrap;

 word-wrap: break-word;

 font-family:courier;

 overflow:hidden;

}

body {

text-align:center;

font-family:tahoma, Arial, Helvetica, sans-serif;

line-height:1.4em;

margin:0;

}

... etc ...

 

 

Refresca la visualización para comprobar que ahora se visualice correctamente.

Podemos probar a aplicarle a un lenguaje el formato de otro, y si nos gusta podemos dejárselo, al fin y al cabo es sólo cuestión de aspecto.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación