Joomla - GNU - Linux - Programación

Escrito por Tux Merlín : Buru en Joomla!, Software para Joomla!

Uno de los plugins poco conocidos, o mejor dicho, poco utilizados, es GeSHi. Se trata de una extensión que se instala normalmente con Joomla! y que permite compartir o mostrar códigos de algunos lenguajes en los artículos. Hace unos días publiqué una breve descripción en las FAQs.

Para su funcionamiento GeSHi no utiliza llaves o corchetes como otros plugins como por ejemplo DAvatar, sino que se vale de la etiqueta HTML llamada <pre> de "preformateo". Esta etiqueta, en un HTML normal haría que el texto puesto dentro se vea con una fuente de ancho fijo, generalmente Courier New.

Aunque GeSHi funciona muy bien con algunos editores, no ocurre lo mismo con TinyMCE, el que trae por defecto Joomla!. Esto ocurre debido a que el editor mencionado codifica las entidades HTML y por lo tanto convierte al plugin en inservible. A continuación vamos a ver un breve tutorial para cambiar ciertas parte del código de este plugin de manera que funcione en TinyMCE.

La idea básica es reemplazar el disparador (trigger), es decir, la etiqueta pre por otra que utilice llaves, y también, darle un estilo personalizado a la vista de los códigos mediante maquetación CSS. El disparador del plugin será {geshi xml:lenguaje}{/geshi}

Primer Paso:
Vamos a modificar el archivo del plugin llamado "geshi. php" para que responda al nuevo disparador. Dicho archivo está ubicado en "raízJoomla//plugins/content/".
A partir de la línea 26 veremos el siguiente código:

// simple performance check to determine whether bot should process further
    if ( JString::strpos( $row->text, 'pre>' ) === false ) {
        return true;
    }
    // Get Plugin info
     $plugin =& JPluginHelper::getPlugin('content', 'geshi');
    // define the regular expression for the bot
    $regex = "#<pre xml:\s*(.*?)>(.*?)</pre>#s";

Lo vamos a reemplazar por este:

// simple performance check to determine whether bot should process further
    if ( JString::strpos( $row->text, 'geshi' ) === false ) {
        return true;
    }
    // Get Plugin info
     $plugin =& JPluginHelper::getPlugin('content', 'geshi');
    // define the regular expression for the bot
   $regex = "#{geshi \s*(.*?)}(.*?){/geshi}#s";

Segundo Paso:
A continuación vamos a hacer que GeSHi utilice etiquetas DIV en lugar de PRE, también pueden utilizar NONE (de párrafo).
Abrimos el archivo "geshi.php" pero el que está ubicado en "raízJoomla/libraries/geshi/" y nos vamos a la línea 226 y veremos este código:

 var $header_type = GESHI_HEADER_PRE;

y lo cambiamos por este:

 var $header_type =  GESHI_HEADER_DIV;

Tercer paso:
Lo que sigue es darle estilo CSS a la muestra de código. Para eso nos vamos al archivo "general.css" ubicado en "raízJoomla/templates/system/css" y agregaremos la siguientes líneas:

 .php {
margin: 2px 0px 2px 0px;
padding: 10px 10px 10px 10px;
border: 1px dotted #aab4be;
border-left: 20px solid #b4b4b4;
background: #f4f5f6;
font-size: 90%;
overflow: auto;
width: 400px;
white-space: nowrap;
}

Estos serían los estilos para PHP, podemos crear una clase para cada estilo, pero hay una solución mejor. Vamos a hacer que tome siempre el mismo estilo para cualquier lenguaje.

Opcional Cuarto Paso:
Nos vamos al archivo "geshi.php" ubicado en "raízJoomla/libraries/geshi/" y ubicamos la línea 344. Allí veremos el siguiente código:

var $overall_id = '';

Lo reemplazmos por este:

var $overall_id = 'geshiID';

En el archivo de estilo nombrado en el tercer paso cambiamos la invocación de la clase, es decir:
cambiamos ".php" por "div#geshiID"

Una vez que hemos relizado todo los cambios, la forma de utilizar el plugin será, por ejemplo para PHP:

{geshi xml:php}aquí poner el código php{/geshi}

Para finalizar, recordemos que con GeSHi solo podemos poner códigos de: PHP, CSS, Javascript, SQL, MySQL, XML, INI y Diff.