Clicky

El secreto de la sintaxis resaltada GeSHi de Joomla

Categoría: Internet (Tutoriales y trucos)
Visitas: 5650

GeSHi, logo

Plugin GeSHi de Joomla 3 con todos los lenguajes disponibles

Desde la versión 1.5 de Joomla se soporta la sintaxis de resaltado (highlighter) GeSHi. La sintaxis GeSHi highlighter viene en forma de un plugin que por defecto no está publicado. Su potencia proviene del hecho de que se hace todo el resaltado de sintaxis del lado del servidor. Lo que significa que puede beneficiarse la caché.

El GeSHi - Generic Syntax Highlighter - es un premiado software publicado bajo la licencia GNU/GPL y está empaquetado en un plugin de Joomla listo para ser utilizado por cualquier autor o editor que necesite destacar la sintaxis de sus ejemplos (el código).

Cuando encontré el plugin GeSHi de Joomla, descubrí que había muy poca documentación sobre cómo utilizarlo. Esto puede haber sido debido a que es muy fácil de usar una vez que sabes cómo, sin embargo, yo en ese momento no lo sabía. Tuve que ir reuniendo pequeños fragmentos de información hasta que descubrí el "cómo".

Así es cómo se utiliza el plugin GeSHi de Joomla

El primer paso es ir al administrador de plugins de Joomla, buscar 'GeSHi' y publicarlo. El plugin GeSHi de Joomla entonces estará activo y listo para el sistema de eventos avanzado de Joomla (a veces referido como " hooks" (ganchos) en otra terminología del CMS) para llamarlo con 'onContentPrepare'.

Ahora, al agregar contenido sólo tienes que utilizar la etiqueta HTML <pre> con el atributo GeSHi xml:lang. El valor del atributo debe ser el lenguaje que debe ser resaltado en la sintaxis. Por ejemplo estas líneas:

<script type="text/javascrpt">
    /* sintaxis JavaScript resaltada  */
</script>

son un fragmento de sintaxis resaltada de JavaScript.

TinyMCE se interpone en el camino del plugin GeSHi de Joomla

He advertido que TinyMCE fastidia un poco cuando se trata de usar el plugin GeSHi. La mejor solución es simplemente deshabilitar TinyMCE. ¿Y los usuarios no técnicos?. Puedes agruparlos. Por ejemplo, puedes desactivar TinyMCE para una única cuenta o el grupo de usuarios autores que necesitan resaltado de sintaxis. Se podría configurar, entonces, un grupo de "autor técnico". Otra alternativa que he encontrado es usar el editor JCE. Cuando el editor JCE está configurado correctamente, funcionará muy bien con el plugin Joomla GeSHi.

Desde JCE recomiendan estos pasos:

1) Configuración de JCE

Habilitar lenguajes en JCE

En el Panel de control JCE, haz clic en el botón Editor Profiles.

Haz clic en el nombre del perfil del usuario, grupo de usuarios o el componente asignado, por ejemplo: 'Default'

Haz clic en la pestaña "Editor Parameters" y, a continuación, en la pestaña "Avanced".

Comprueba que las opciones Allow Javascript, Allow CSS o Allow PHP se establecen en Sí (en función del tipo de código que sea necesario insertar).

2) Configuración de Joomla! 2.5 - 3.0

Joomla, Filtros de texto

     En la Configuración Global de Joomla!, haz clic en la pestaña Filtros de texto.
     Para el grupo de superusuarios, o cualquier otro grupo de usuarios de confianza, establece Tipo de filtro en Sin filtrado. Asegúrate de que sólo se establece esta opción para grupos de usuarios en los que se puede confiar, ya que establecer el tipo de filtro en "Sin filtrado" en esencia permite al usuario incluir todo el código HTML en un artículo.

¿Qué lenguajes soporta el plugin GeSHi de Joomla?

La versión 3 de Joomla ofrece el resaltado de GeSHi con los siguientes:
CSS
Diff (archivo de formato Diff)
HTML
ini (archivos de configuración)
JavaScript
MySQL
PHP
SQL
XML

Todos ellos se activan, respectivamente, de la siguiente manera:

<pre xml:lang="css">
<pre xml:lang="diff">
<pre xml:lang="html">
<pre xml:lang="ini">
<pre xml:lang="javascript">
<pre xml:lang="mysql">
<pre xml:lang="php">
<pre xml:lang="sql">
<pre xml:lang="xml">

Ejemplos:

CSS - <pre xml:lang="css">

background: none repeat scroll 0 0 #F1F1F1;
border: 1px dotted #D3D3D3;
margin-bottom:10px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre ol li{
margin: 0 0 0 20px !important;
padding: 4px;
}
pre ol {
margin: 0 0 0 10px !important;
}
.odListItem{
background:#fff
}
.evenListItem{
background:#EFFEFF
}

HTML - <pre xml:lang="html">

<!DOCTYPE html>
<html lang="es-es">
<head> </head>
<body>
    
    <header>
    
        
          <a href="/" id="pull-left">
        <img width="314" height="53" src="http://www.xn--apaados-6za.es/images/logo30-azul-p.png" alt="Somos apañados - Somos apañados, internet tutoriales y trucos" />
     </a>
             <div>
            <a href="#" data-toggle="collapse" data-target=".nav-collapse">
                  Main menu            </a>
        </div>
        
        <div>
            <ul>
<li><a href="/" >Inicio</a></li><li><a href="/contactar.html" >Contactar</a></li><li><a href="/privacidad.html" >Privacidad</a></li></ul>

        </div>
    </header>
</body>
</html>

PHP - <pre xml:lang="php">

<?php
/**
 * @package     Joomla.Plugin
 * @subpackage  Content.geshi
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */ defined('_JEXEC') or die; /**
 * GeSHi Content Plugin
 *
 * @package     Joomla.Plugin
 * @subpackage  Content.geshi
 */
class plgContentGeshi extends JPlugin
{
    /**
     * @param   string    The context of the content being passed to the plugin.
     * @param   object    The article object.  Note $article->text is also available
     * @param   object    The article params
     * @param   integer  The 'page' number
     */
    public function onContentPrepare($context, &$article, &$params, $page = 0)
    {
        // Simple performance check to determine whether bot should process further.
        if (JString::strpos($article->text, 'pre>') === false)
        {
            return true;
        }

        // Define the regular expression for the bot.
        $regex = "#<pre xml:\s*(.*?)>(.*?)</pre>#s";

        // Perform the replacement.
        $article->text = preg_replace_callback($regex, array(&$this, '_replace'), $article->text);

        return true;
    }

Conclusión

El Plugin GeSHi de Joomla es una gran herramienta para los autores y los editores que tienen necesidad de resaltado de sintaxis. El Plugin GeSHi de Joomla no es difícil de usar como en este artículo trato de mostrar y ayudar. Tiene una buena selección de idiomas que bloggers y escritores técnicos son propensos a necesitar. Si el idioma que necesitas no está incluido, por favor mira abajo: ¿Qué pasa si el idioma que necesito no está incluido? Si no, espero que este artículo ha sido útil.

¿Qué pasa si el idioma que necesito no está incluido?

Bueno, podrías agregarlo a la carpeta del plugin GeSHi ( /www/plugins/content/geshi/geshi/geshi ) - así es como GeSHi funciona. Sin embargo, como estoy seguro que sabes, esto es cortar el núcleo de Joomla y es malo e innecesario. La solución consiste en copiar la carpeta completa del plugin GeSHi de Joomla a tu máquina local. A continuación, agregar los idiomas que necesites y que están disponibles en el proyecto GeSHi a la carpeta del plugin. A continuación, volver a empaquetar con un archivo de instalación XML modificado, comprimirlo, e instalarlo de nuevo en Joomla. No te olvides de publicar tu versión extendida y ya está.

En el siguiente enlace puedes descargar uno que preparé que cuenta con todos los lenguajes que GeSHi tiene a su disposición:

     Joomla 3 - Joomla-GeSHi-Plus.zip

Notas:

     Por motivos de rendimiento recomiendo eliminar los lenguajes que no se vayan a utilizar
     Viene sin garantía