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.
