Errores PHP
X
Usuario
Password
0 FPS

Colorear código con PHP (Parte 2 CSS)

14 de Octubre del 2011 por Josep Antoni Bover, 3123 visitas, 0 comentarios, 0 votos.
Categorías : PHP, HTML, Programación, CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...
Colorear código con PHP (Parte 2 CSS)

Continuando con el tutorial de ayer, hoy nos toca ver como crear un codigo php que nos sirva para pintar codigo css utilizando el formato de Dreamweaver.

La verdad es que tampoco tiene demasiada complicacion, pero para un futuro me gustaria hacer una funcion que pinte documentos HTML, y para ello necesito tener todas sus posibles partes : CSS, JavaScript, y PHP.

Y a decir verdad, hoy es viernes y quiero sacar una entrada sin tener que forzar mucho la maquina... xD

Al igual que en el tutorial de ayer, lo primero es tener bien claro la estructuracion del css, y cuantos colores vamos a necesitar.

Veamos un ejemplo pequeño de css :

Colores necesarios para pintar el CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#NombreID {
width:40px;
height:40px;
background-image:url("../Imagen.png");
}
/* Comentario */
#NombreID:hover {
background-image:url("../ImagenH.png");
cursor:pointer;
}
.NombreClase {
cursor:pointer;

Como podeis observar en el ejemplo anterior vamos a necesitar cinco colores : el rosa para los nombres de clase / id, el azul oscuro para el nombre del estilo, el azul claro para los valores del estilo, el verde para las cadenas de caracteres y el gris para los comentarios

Ahora que ya tenemos claros los colores que vamos a necesitar, vamos a definir esos colores en un archivo css :

Colores necesarios para pintar el CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* Archivo que contiene los colores para pintar el código CSS */
.Codigo_Verde {
color: #006600;
font-family: Courier New;
font-size: 12px;
}
.Codigo_Azul {
font-family: Courier New;
font-size: 12px;
color: #0000FF;
}
.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);
}
.Codigo_Rosa {
font-family: Courier New;
font-size: 12px;
color:rgb(255, 58, 255);
}

Una vez tenemos definidos los colores solo nos queda escribir la funcion PHP que pintara una cadena de caracteres utilizando el formato de Dreamweaver para el css :

Función PHP PintarCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// Función que colorea el texto CSS especificado según el esquema de colores de Dreamweaver
// - $Texto : Texto CSS que queremos colorear
function PintarCSS($Texto) {
$Texto = str_replace(' ', ' ', $Texto); // Re-emplazo tabuladores
$TotalCaracteres = strlen($Texto);
$TextoColoreado = "<span class='Codigo_Rosa'>";
$Estado = ""; // Puede ser : "String1", "String2" y "ComentarioML"
$DentroEstilo = false;
for ($i = 0; $i < $TotalCaracteres; $i++) {
switch ($Estado) {
case "" :
if ($Texto[$i] == "{") {
$TextoColoreado .= "{</span><span class='Codigo_AzulOscuro'>";
$DentroEstilo = true;
}
else if ($Texto[$i] == "}") {
$TextoColoreado .= "</span><span class='Codigo_Rosa'>}";
$DentroEstilo = false;
}
else if ($Texto[$i] == "'") {
$Estado = "String1";
$TextoColoreado .= "<span class='Codigo_Verde'>'";
}
else if ($Texto[$i] == '"') {
$Estado = "String2";
$TextoColoreado .= '<span class="Codigo_Verde">"';
}
else if ($Texto[$i] == "/" && $Texto[$i + 1] == "*") {
$Estado = "ComentarioML";
$TextoColoreado .= "<span class='Codigo_Gris'>/*";
$i ++;
}
else if ($Texto[$i] == ":" && $DentroEstilo == true) {
$TextoColoreado .= "<span class='Codigo_Rosa'>:</span><span class='Codigo_Azul'>";
}
else if ($Texto[$i] == ";") {
$TextoColoreado .= "</span><span class='Codigo_Rosa'>;</span>";
}
else {
$TextoColoreado .= $Texto[$i];
}
break;
case "String1" :
if ($Texto[$i] == "'") {
$Estado = "";
$TextoColoreado .= "'</span>";
}
else { $TextoColoreado.= $Texto[$i]; }
break;
case "String2" :
if ($Texto[$i] == '"') {
$Estado = "";
$TextoColoreado .= '"</span>';
}
else { $TextoColoreado.= $Texto[$i]; }
break;
case "ComentarioML" :
if ($Texto[$i] == "*" && $Texto[$i + 1] == "/") {
$Estado = "";
$TextoColoreado .= "*/</span>";
$i ++;
}
else { $TextoColoreado.= $Texto[$i]; }
break;
}
}
$TextoColoreado .= "</span>";
return $TextoColoreado;
}

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 6 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 7 declaramos la variable $Estado, la cual puede ser :

""Sin Estado
"String1"String declarado con comillas simples 'Str'.
"String2"String declarado con comillas dobles "Str".
"ComentarioML"Comentario del estilo C-Cpp /* Comentario */.

Para entender mejor los estados, pongamos por ejemplo que encontramos el siguiente comentario : /* prueba de cadena de caracteres "hola" */

Como veis dentro del comentario se utilizan comillas 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 los caracteres para empezar un comentario, seran 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 "ComentarioML" buscamos específicamente el carácter "*" y que el siguiente caracter sea "/" 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 CSS 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.