Crear un botón ‘Ver código fuente’ | Programar Plus

0

El fantástico sitio de Remy Sharp para demostraciones de HTML5 tiene un botón “Ver código fuente” en cada una de las páginas de demostración individuales. Haga clic en él y verá el código fuente completo de la página que está viendo. No es una ventana emergente o una nueva pestaña, solo muestra la fuente allí mismo en la página. Pensé que era genial, así que me dispuse a recrearlo a mi manera.

La forma elegante

Ver demostración Descargar archivos

La primera idea que me vino a la mente fue usar la pseudo clase :target de CSS3. Hablamos de esto hace un tiempo mientras exportábamos pestañas CSS3. La idea es tener un enlace que vincule a la etiqueta hash #source-code. Eso pone #source-code al final de la URL y permite que el selector :target coincida y aplique estilo. Los basicos:

<a href="https://css-tricks.com/make-a-view-source-button/#source-code">View Source</a>
#source-code { display: none; }
#source-code:target { display: block; }

Ahora solo es cuestión de llenar ese elemento #source-code con el código fuente real. Ese es el territorio de JavaScript, ya que querremos extraer ese código dinámicamente, no repetir el código fuente solo para mostrarlo. De esta manera, cada vez que modificamos la página, no tenemos que ajustar nada, nuestro botón Ver código fuente muestra el código fuente actualizado tal como está escrito. Podemos apoyarnos en jQuery para obtener esto por nosotros:

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

Eso nos dará todo el HTML de la página, excluyendo solo el DOCTYPE y el real <html> etiquetas También puede acceder a esto a través de document.documentElement.innerHTML pero bueno, si vamos a usar jQuery, simplemente usémoslo. Crearemos un nuevo <pre> y rellénelo con un DOCTYPE “falso” y etiquetas html, y luego suelte ese HTML que acabamos de recopilar de la página.

Algunas consideraciones rápidas con ese HTML recopilado: 1) Escapemos de los < para que se muestren en la página correctamente sin intentar representarlos como HTML real. 2) Vamos a "vincular" cualquier enlace que encuentre para que se pueda hacer clic en él (tomado en parte de aquí).

Luego colocaremos ese recién creado <pre> dentro de nuestro div #source-code.

$(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="https://css-tricks.com/make-a-view-source-button/">$1</a>') + 
				'n&lt;/html>'
	}).appendTo("https://css-tricks.com/make-a-view-source-button/#source-code");
});

Cerrar el código fuente es deliciosamente simple. Dado que el botón “Ver fuente”, cuando se hace clic, agrega una etiqueta hash a la página, eso significa que el botón “Atrás” en el navegador funcionará. Al presionarlo, se elimina la etiqueta hash, por lo que el #código-fuente ya no está dirigido y CSS lo oculta automáticamente. El div #source-code también tiene un gráfico “X” simple, que se vincula con la etiqueta hash “#”, que tiene exactamente el mismo efecto.

Esto solo se vincula a “#”, que saca nuestro elemento de visualización de origen de: destino, lo que lo oculta instantáneamente.

Estilizando el código

Una de las formas más fáciles de aplicar el resaltado de sintaxis al código es el proyecto google-code-prettify. Este es un resaltador basado en JavaScript. Básicamente, vincula el archivo JavaScript y el archivo CSS que viene con la descarga:

<link rel="stylesheet" href="https://css-tricks.com/make-a-view-source-button/css/prettify.css" />
<script src="prettify/prettify.js"></script>

Asegúrese de que su <pre> Las etiquetas tienen una clase de “prettyprint”. Agregué esto a la sintaxis de creación de elementos que estamos usando para crear el <pre>:

"class": "prettyprint"

y llama al prettyPrint() función cuando la página esté lista. Recomiendan agregar una carga a la etiqueta del cuerpo, pero dado que estamos usando la función jQuery DOM ready, podemos llamarla allí.

Modifiqué un poco los colores para trabajar en el fondo oscuro. Esta es la parte superior del archivo prettify.css:

.str { color: #61ff74; }
.kwd { color: #ea5eff; }
.com { color: white; }
.typ { color: red; }
.lit { color: red; }
.pun { color: white; }
.pln { color: white; }
.tag { color: #ffab58; }
.atn { color: #fabb4e; }
.atv { color: #ffd996; }
.dec { color: red; }

Prettify funciona envolviendo partes del código en tramos, que colorean esa parte. Observe también los caracteres correctamente escapados.

Compatibilidad

Prácticamente todo lo moderno, siempre que sea compatible con CSS3: objetivo. Se rompe en IE 8 y hacia abajo, pero está bien en IE 9.

método primitivo

Firefox y Chrome admiten el protocolo de URL “view-source:” que abre su visor de código fuente nativo. Si está haciendo estos enlaces solo para usted, podría hacer lo siguiente:

<a class="button" onClick='window.location="view-source:" + window.location.href'>View Source</a>

El método de Remy

Resulta que la forma en que lo hice no se parece en nada a cómo se hace en las páginas de demostración de HTML5. Este es mi intento de explicar su técnica:

  1. Esté atento a todos los clics
  2. Si el clic fue en un enlace con la etiqueta hash #ver-fuente…
  3. Agregue un nombre de clase de .view-source al cuerpo (esta clase revela lo que de otro modo estaría oculto) <pre>)
  4. Si aún no hay uno, agregue un <pre> al cuerpo con ID #view-source
  5. <pre> está lleno de HTML tomado de document.documentElement.innerHTML
  6. Establezca un temporizador para verificar cada 200 milisegundos si la URL aún tiene la etiqueta hash #view-source.
  7. Si la etiqueta hash se ha ido o ha cambiado, elimine el nombre de la clase del cuerpo (ocultando el <pre>) y cancelar el temporizador.
(function () {

var pre = document.createElement('pre');
pre.id = "view-source"

// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
  if (event.target.hash == '#view-source') {
    // event.preventDefault();
    if (!document.getElementById('view-source')) {
      pre.innerHTML = ('<!DOCTYPE html>n<html>n' + document.documentElement.innerHTML + 'n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
      document.body.appendChild(pre);      
    }
    document.body.className="view-source";
    
    var sourceTimer = setInterval(function () {
      if (window.location.hash != '#view-source') {
        clearInterval(sourceTimer);
        document.body.className="";
      }
    }, 200);
  }
});
  
})();

Y luego el bit inteligente de CSS que permite que el código fuente se oculte normalmente y se apodere de la pantalla cuando el cuerpo adquiere el .view-source clase:

#view-source {
  display: none;
}

body.view-source > * {
  display: none;
}

body.view-source #view-source {
  display: block !important;
}

Beneficios a lo grande

Lo bueno del método de Remy es que es mucho más compatible con varios navegadores que mi idea. Utiliza JavaScript puro, por lo que no depende de la biblioteca en absoluto, y no utiliza ninguna técnica que sea “elegante” y que no funcionaría en navegadores más antiguos (más o menos). Él podría haber usado el hashchange event, por ejemplo, para observar cuando el #view-source desaparece, pero eso no es compatible con algunos navegadores más antiguos, por lo que incluso eso se manejó bien.

Uso

Por supuesto, siéntete libre de usar esto como quieras.

Ver demostración Descargar archivos

En su forma actual, este código se basa en ciertas marcas en la página, a saber, el botón en sí y el div #view-source. Esto definitivamente podría convertirse en un complemento que agregue esas cosas automáticamente, lo que haría que esto sea mucho más fácil de implementar. Puedo hacer eso eventualmente.

Esto también me hace pensar que 1) Realmente necesito volver a poner el resaltado de sintaxis en el diseño del blog aquí en Programar Plusy 2) Debería hacer esto Ver código fuente en todas las páginas de demostración. Ambas cosas se harán con el tiempo.

Otra cosa que sería genial es marcar esto. Eso sería especialmente genial para Safari, que tiene View Source deficiente (aunque hay una extensión para solucionarlo). Aún así, ninguno de los navegadores ve la fuente en una ventana modal, lo que creo que a veces es mejor que abrir una nueva ventana o pestaña.

(Visited 4 times, 1 visits today)