SummArg | Cursos y recursos para webmasters

21/10/2010

Botón para ver código fuente

La inclusión de un botón para ver el código fuente de una página web es un detalle muy útil en un sitio como html5demos.com. Basandose en esa idea Chris Coyier recreó esta técnica a su manera y nos ofrece desde css-tricks.com dos modos para duplicar la técnica. Pueden ver los demos haciendo click aquí.

The Fancy Way

El código fuente va a mostrarse dentro de #source-code, y con la pseudo clase :target de CSS3 vamos a hacer que el código quede oculto hasta ser llamado. Observen que el botón añade #source-code al final de la URL.

<a href="#source-code">View Source</a>
#source-code { display: none; }
#source-code:target { display: block; }

Ahora hay que llenar ese #source-code con el código fuente real de la página y para obtener esa información debemos recurrir a javascript.

var html = $("html").html();

Con eso obtenemos el código HTML de una página y excluimos el DOCTYPE y los tags <html>, por lo que crearemos un elemento <pre> y lo llenaremos con un DOCTYPE y etiquetas <html> falsos pero con el contenido real que obtenemos de la página.

Los signos < y > se colocan en ascii para renderizar correctamente en HTML y se colocan links clickeables.

$(function() {
	$("<pre />", {
		"html":   '&lt;!DOCTYPE html>n&lt;html>n' +
				$("html")
					.html()
					.replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
					.replace(/((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi,'<a href="$1">$1</a>') +
				'n&lt;/html>'
	}).appendTo("#source-code");
});

Finalmente se echa mano a google-code-prettify para dar formato al código extraído. Este marcador de sintaxis debe ser descargado de su sitio oficial y se linkean tanto el .css como el archivo .js desde el <head> de nuestro documento. Ahora los tags <pre> deberán tener la clase prettify para mostrar el nuevo estilo.

<link rel='stylesheet' href='css/prettify.css' />
<script src="prettify/prettify.js"></script>

Funciona en todos los navegadores modernos excepto en IE8, aunque en IE9 se ve muy bien.

Descargar los dos métodos de css-tricks.com

Dejar un comentario