NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Resaltar sintaxis de un código fuente

29 de Enero del 2016 por Josep Antoni Bover, 2162 visitas, 2 comentarios, 4 votos con una media de 5 sobre 5.
Categorías : PHP, JavaScript, CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Resaltar sintaxis de un código fuente

Uno de los primeros problemas que me encontré al empezar esta web en el 2009 fue la necesidad de mostrar código fuente de varios lenguajes resaltando su sintaxis.

Al investigar sobre el tema, me di cuenta que la mayoría de soluciones (por lo menos las mas aceptables) estaban hechas con JavaScript. Lo que al final con el tiempo me llevo a crearme mi propia herramienta para remarcar la sintaxis en php, ya que yo consideraba mejor hacer el parsing en php y guardarlo en archivos "cache", de forma que solo se realizaba el parsing si la fecha de modificación del archivo cache era inferior a la fecha de modificación del archivo de código.

Por el 2011 publique varias entradas en el blog sobre el tema de remarcar sintaxis en php, en las que explicaba como parsear determinados lenguajes y resaltar su sintaxis : Colorear código XML, Colorear código CSS, Colorear código JavaScript, Colorear código PHP, Colorear código C/C++, Colorear código HTML. Al final dichas entradas del blog acabaron fusionadas para formar el objeto devildrey33_PintarCodigo.

Hace cosa de un par de meses se me metió en la cabeza que necesitaba poder resaltar ciertas líneas de código con enlaces parecidos a un link. Y esto me llevo a re-escribir prácticamente por completo el objeto devildrey33_PintarCodigo. El resultado, es que ahora se pueden resaltar una o varias líneas de código pasando por encima de los enlaces. Si la línea no está visible en la pantalla, al hacer click en el enlace nos lleva hasta ella.

Test HTML
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
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo colorear HTML</title>
<link href='ColorearCodigoPHP_HTML_Ejemplo.css' rel='stylesheet' type='text/css' />
<!-- Una única línea con estilos -->
<style>.MiEstilo { margin-left:auto; margin-right:auto; }</style>
<!-- Estilos multi-linea -->
<style>
.MiEstilo2 {
margin-left:auto;
margin-right:auto;
margin-top:10px;
};
</style>
<!-- Código JavaScript en una sola línea -->
<script>function MiFuncion(variable) { alert(variable); }</script>
<!-- Código JavaScript multi-linea -->
<script>
function MiFuncion(variable) {
console.log(variable);
alert(variable); // Comentario
}
</script>
</head>
<body>
<!-- Código PHP en una sola línea -->
<?php $MiVariable = true; ?>
<!-- Código PHP multi-linea -->
<?php
function MiFuncion($Var, $Var2 = "string") {
return $Var2." ".($Var * 10);
}
?>
</body>
</html>
<!-- Final del ejemplo-->

Funciones

Las funciones PintarArchivo permiten o bien mostrar un archivo completo, o mostrar solo una porción. Para mostrar una porción hay que marcar el archivo de código con un par de comentarios especiales, por ejemplo en un archivo PHP se marcara el principio de la porción con el comentario /* -[INICIO devildrey33.%ID%]- */, y el final con /* -[FIN devildrey33.%ID%]- */. Hay que substituir %ID% por la id que deseemos darle a esa porción de código.

La función PintarTexto muestra un marco con el código especificado sin parsear. Esta función es ideal para mostrar comandos de consola.

Funciones Comentarios Parámetros
PintarArchivoHTML($IDMarco, $Titulo, $Archivo, $ID = "", $Tema = "NetBeans")
PintarArchivoXML($IDMarco, $Titulo, $Archivo, $ID = "")
PintarArchivoCSS($IDMarco, $Titulo, $Archivo, $ID = "", $Tema = "NetBeans")
PintarArchivoPHP($IDMarco, $Titulo, $Archivo, $ID = "", $Tema = "NetBeans")
PintarArchivoJS($IDMarco, $Titulo, $Archivo, $ID = "", $Tema = "NetBeans")
PintarArchivoC($IDMarco, $Titulo, $Archivo, $ID = "", $Tema = "VC")
<!-- -->
<!-- -->
/* */
/* */ o //
/* */ o //
/* */ o //
$IDMarco es la ID del marco del código en HTML/JavaScript.
$Titulo el titulo (puede ser "" si no deseas mostrar ningún título).
$Archivo path del archivo que contiene el código fuente.
$ID es la id de la porción a mostrar, si no hay $ID se mostrará todo el archivo.
$Tema nombre del tema visual a utilizar.
PintarTexto($IDMarco, $Titulo, $Codigo) NO FUNCIONA CON COMENTARIOS $IDMarco es la ID del marco del código en HTML/JavaScript.
$Titulo el titulo (puede ser "" si no deseas mostrar ningún titulo).
$Codigo código a mostrar sin parsear.
Las funciones PintarArchivo comprueban si la fecha de modificación del archivo cache es mas pequeña que la del archivo fuente, y en ese caso realizan el parsing. En caso contrario se imprime directamente el archivo de la cache sin hacer ningún tipo de parsing.

Como se debe utilizar

En 5 sencillos pasos ya puedes empezar a remarcar la sintaxis de tus códigos :

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
<!DOCTYPE HTML>
<html>
<?php
// Cabecera con el objeto devildrey33_PintarCodigo
include("devildrey33_PintarCodigo.php");
// Creo una instancia al objeto devildrey33_PintarCodigo
$PintarCodigo = new devildrey33_PintarCodigo;
?>
<head>
<!-- Cabecera CSS OBLIGATORIA -->
<link rel='stylesheet' href='PintarCodigo.css' />
<!-- Archivos JavaScript (Solo son necesarios si se quieren utilizar los enlaces para resaltar código) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="PintarCodigo.js"></script>
</head>
<body>
<?php
// -[INICIO devildrey33.FuncionEjemplo]-
function MiFuncionDeEjemplo () { };
// -[FIN devildrey33.FuncionEjemplo]-
$PintarCodigo->PintarArchivoPHP("IDHTML", "Titulo", basename(__FILE__), 'FuncionEjemplo');
?>
<linea cid='IDHTML' l='1'>Enlace que apunta a la primera linea</linea>
</body>
</html>

Si queremos utilizar los enlaces para resaltar código, basta con añadir las cabeceras JavaScript (JQuery y PintarCodigo), y utilizar la etiqueta <linea>.

El atributo cid es la ID del marco de código, y el atributo l es el número de la línea / líneas de código. Para añadir múltiples líneas de código basta con delimitarlas con una coma, por ejemplo l='1,2,3,4' marcará las 4 primeras líneas.

Contenido del ejemplo

/Cache/ Directorio donde se guarda la cache de los parsings (se requieren permisos de escritura).(NECESARIO)
/Diccionarios/ Directorio donde se encuentran los diccionarios de colores para los distintos lenguajes.(NECESARIO)
/devildrey33_PintarCodigo.php Archivo php que contiene el objeto devildrey33_PintarCodigo.php(NECESARIO)
/PintarCodigo.css Archivo que contiene los estilos para los marcos de código.(NECESARIO)
/PintarCodigo.js Archivo que contiene el script que hace funcionar los enlaces para resaltar código.(OPCIONAL)
/test-c.php Pequeño test sobre un código C++
/test-css.php Pequeño test sobre una hoja de estilos CSS
/test-html.php Pequeño test sobre un código HTML que contiene además PHP, CSS, y JavaScript.
/test-js.php Pequeño test sobre un código JavaScript.
/test-php.php Pequeño test sobre un código PHP.


[#2] devildrey33 17 Noviembre del 2017 a las 21:22, votos 0 de 0.
1 Hola de nuevo Jhon, por editor de texto HTML imagino que te refieres a la parte del Lab de esta web? https://devildrey33.es/Lab/

Si es asi echale un vistazo a una librería que se llama Codemirror : https://codemirror.net
Esta librería es un lujo, soporta prácticamente todos los lenguajes de programación y tiene cantidad de opciones.

En esencia esta librería solo es un editor de texto para múltiples lenguajes con la capacidad de resaltar el código. Para hacer que luego aparezcan los cambios, la idea es crear un iframe y meterle en el innerHTML el código que tengas en el editor de texto controlando el evento OnChange del Codemirror.

En fin espero que te sirva de ayuda, Saludos!
[#1] Jhon 17 Noviembre del 2017 a las 20:09, votos 0 de 0.
Hola, Yo Otra vez, comentare aqui porque no veo donde comentar mas.

Mi pregunta es:

Como Haces para introducir un Editor de Texto HTML en esta pagina???
y abajo aparecen los cambios que hayas hecho en ese cuadro de texto????
Existe una Libreria para hacer tal cosa?
porque tambien me gustaria que si yo lo llegase a tener, pues entonces quisiera cambiar los colores,
gracias de antemano.....