Resaltar sintaxis de un código fuente
Categorías : PHP, JavaScript, CSS, HTML, Programación.

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
<!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 --><?phpfunction 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. |
Como se debe utilizar
En 5 sencillos pasos ya puedes empezar a remarcar la sintaxis de tus códigos :
Incluir devildrey33_PintarCodigo en nuestro archivo .Crear una instancia de devildrey33_PintarCodigo .Añadir las cabeceras CSS y JS .Delimitar el ejemplo a mostrar con comentarios .Ejecutar el parseado para mostrar el resultado .
<!DOCTYPE HTML><html><?php// Cabecera con el objeto devildrey33_PintarCodigoinclude("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 <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. |