Lighter.js es una clase echa con MooTools 1.2.1 para el remarcado de código js, html, php, entre otros.
Su uso es muy sencillo en seguidamente explicaremos como utilizarlo.
Primero descargamos la librería Mootools 1.2.1 y la clase Lighter.js con sus componentes aquí.
Despues de descomprimirlo pasaremos a crear una pagina html donde incluiremos la librería Mootools y la clase Lighter.
<head> <script src="js/mootools-1.2.1-core.js"></script> <script src="js/Lighter.js"></script> </head>
Ahora incluiremos este script antes de cerrar el “head” que se encargara de recorrer los tag “pre” y darle el estilo correspondiente.
window.addEvent('domready', function() {
$$('pre').light({
altLines: 'hover',
indent: 2,
editable: true,
mode: 'ol',
path: 'compressed/'
});
});
donde las opciones significan:
altLines: Le dara un estilo diferente a la fila, en este caso es cuando el mouse esta sobre la fila.
indent: El numero de espacios a remplazar por un tab.
editable: Permite comportarse como un editor de texto remarcando el formato.
mode: es el modo en que se mostraran las filas.
path: es la ruta donde se encuentran los componentes (js, php, html, sql, etc).
Como un ejemplo pondremos un html dentro del body.
<pre class="html"> <head> <script src="js/moo-1.2.1-core.js"></script> <script src="js/Lighter.js"></script> </head> </pre>
