0 FPS

Colorear código con PHP (Parte 1 XML)

13 de Octubre del 2011 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : PHP, HTML, Programación, XML.

La web está en segundo plano, animación en pausa.

Cargando animación...

Últimamente ando bastante liado intentando automatizar varios aspectos de www.devildrey33.es, en especial estoy creándome unas funciones para colorear todo tipo de códigos.

La idea es tener un conjunto de funciones php que me faciliten la vida a la hora de mostrar archivos de código.

Para empezar vamos a hacer algo fácil, que será colorear un código XML con el formato que utiliza Dreamweaver.

En primer lugar tenemos que tener muy claro que partes hay que poner de un color o de otro. En un archivo XML básicamente tenemos cuatro partes diferenciales que van a ir cada una en un color, y son : etiquetas, cadenas de caracteres, conjuntos de datos, y comentarios.

Veamos un ejemplo básico de un archivo XML :

Ejemplo XML

<!-- Comentario -->
<Etiqueta Atributo='Cadena de caracteres'>Conjunto de datos</Etiqueta>

Como podéis ver el comentario está pintado de color gris, la etiqueta de color azul, la cadena de caracteres del atributo de color verde, y los datos internos de la etiqueta de color negro.

Obviamente podemos poner los colores como nos plazca, pero personalmente prefiero tener esta configuración de colores, que me es más familiar. Google chrome por ejemplo utiliza su propia configuración de colores y en vez de tener cuatro colores para diferenciar las distintas partes del XML tiene cinco.

Ahora vamos a hacer unos estilos css los cuatro colores que queremos usar :

CSS con los colores necesarios

/* Archivo que contiene los colores para el codigo XML */
.Codigo_Negro {
    color: #000000;
    font-family: Courier New;
    font-size: 12px;
}

.Codigo_Verde {
    color: #006600;
    font-family: Courier New;
    font-size: 12px;
}

.Codigo_AzulOscuro {
    font-family: Courier New;
    font-size: 12px;
    color:#009;
}

.Codigo_Gris {
    font-family: Courier New;
    font-size: 12px;
    color:rgb(128, 128, 128);
}

En esencia se han declarado los cuatro colores que además utilizaran la fuente Courier New de 12 pixeles.

Por último nos queda hacer la función que coloreara el código XML y lo mostrara en un formato HTML valido.

Función PHP PintarXML

// Función que colorea el texto XML especificado según el esquema de colores de Dreamweaver
// - $Texto : String con el texto XML a colorear.
function PintarXML($Texto) {
    $Texto = str_replace('    ', '    ', $Texto); // Re-emplazo tabuladores
    $TamTexto = strlen($Texto);            
    $TextoColoreado = "<span class='Codigo_Negro'>";
    $Estado = ""; // Puede ser : String1, String2, Comentario
    for ($i = 0; $i < $TamTexto; $i++) {
        switch ($Estado) {
            case "" : 
                if ($Texto[$i] == "'") {
                    $Estado = "String1";
                    $TextoColoreado .= "<span class='Codigo_Verde'>'";
                }
                else if ($Texto[$i] == '"') {
                    $Estado = "String2";
                    $TextoColoreado .= '<span class="Codigo_Verde">"';
                }
                // Etiqueta normal
                else if ($Texto[$i] == "<" && $Texto[$i + 1] != "!" && $Texto[$i + 2] != "-" && $Texto[$i + 3] != "-") { 
                    $TextoColoreado .= '<span class="Codigo_AzulOscuro"><';
                }
                // Comentario
                else if ($Texto[$i] == "<" && $Texto[$i + 1] == "!" && $Texto[$i + 2] == "-" && $Texto[$i + 3] == "-") { 
                    $TextoColoreado .= '<span class="Codigo_Gris"><!--';
                    $Estado = "Comentario";
                    $i += 3;
                }
                else if ($Texto[$i] == ">") {
                    $TextoColoreado .= '></span>';
                }
                else {
                    $TextoColoreado .= $Texto[$i];
                }
                break;
            case "Comentario" :
                if ($Texto[$i] == ">" && $Texto[$i - 1] == "-" && $Texto[$i - 2] == "-") {
                    $TextoColoreado .= "></span>";
                    $Estado = "";
                }
                else if ($Texto[$i] == "<") $TextoColoreado .= "<";
                else if ($Texto[$i] == ">") $TextoColoreado .= ">";
                else                         $TextoColoreado .= $Texto[$i];
                break;
            case "String1" :
                if ($Texto[$i] == "'") {
                    $TextoColoreado .= "'</span>";
                    $Estado = "";
                }
                else if ($Texto[$i] == "<") $TextoColoreado .= "<";
                else if ($Texto[$i] == ">") $TextoColoreado .= ">";
                else                        $TextoColoreado .= $Texto[$i];
                break;
            case "String2" :
                if ($Texto[$i] == '"') {
                    $TextoColoreado .= '"</span>';
                    $Estado = "";
                }
                else if ($Texto[$i] == "<") $TextoColoreado .= "<";
                else if ($Texto[$i] == ">") $TextoColoreado .= ">";
                else                        $TextoColoreado .= $Texto[$i];
                break;
        }
    }
    return $TextoColoreado."</span>";
}

En la línea 4 del código utilizamos str_replace para re-emplazar todas las tabulaciones por cuatro espacios, (ojo con esto ya que puede dejarnos el archivo mal tabulado, pero es que no he encontrado una forma de reducir los 8 caracteres por defecto que tiene la tabulación en marcos PRE, y aunque existe un estilo css3 para ello, no funciona en algunos navegadores).

En la línea 5 declaramos la variable $TextoColoreado, que será donde irá a parar todo el texto revisado y con sus correspondientes spans con su color.

En la linea 6 declaramos la variable $Estado, la cual puede ser :

""	Sin Estado
"String1"	String declarado con comillas simples 'Str'.
"String2"	String declarado con comillas dobles "Str".
"Comentario"	Comentario del estilo HTML <!-- -->.

Para entender esto mejor, pongamos por ejemplo que encontramos el siguiente comentario : 

Como veis dentro del comentario se utilizan comillas y los caracteres < y > pero como forman parte del comentario no debemos escanearlos, por lo que mientras estemos dentro de un comentario ignoraremos esos caracteres. Lo mismo pasa con las cadenas de caracteres, si dentro de ellas encontramos esos caracteres también serán ignorados.

A partir de la línea 8 empieza el bucle que recorre todo el texto carácter a carácter, y lo primero que miramos es el estado.

Si el estado esta vacio, buscamos cualquier carácter que nos indique que color tenemos que utilizar.

Si estado es "Comentario" buscamos específicamente el carácter ">" y que los dos caracretes anteriores sean "-" para salir de ese estado.

Si el estado es "String1" buscamos la próxima comilla simple para salir del estado. (No nos vale la comilla doble ya que no podemos empezar un string con comillas simples y terminarlo con comillas dobles).

Si el estado es "String2" buscamos la próxima comilla doble para salir del estado.

Y finalmente devolvemos el texto coloreado.

Esto es todo por hoy, espero que este documento os sirva de ayuda si algún día queréis hacer una función para pintar códigos XML para vuestra web.

Este código ha quedado obsoleto, por favor echa un vistazo a la versión 2 : Resaltar sintaxis de un código fuente.

Usuario
Password