Como extraer y escribir el código fuente de una página web

En todas las páginas de esta sección y en muchas de nuestro sitio web, compartimos código para copiar y pegar, en formatos HTML, JavaScript, PHP y CSS.
Para mostrar el código usamos snipetts, que consisten básicamente de elementos PRE y CODE dentro de los cuales se escribe el código manualmente.
Otra opción totalmente diferente consiste en generar usando JavaScript, el código fuente original que deseamos compartir, extrayéndolo del mismo documento HTML.
En muchos casos es preferible esta opción para ahorrarnos código adicional y para mostrar exactamente las instrucciones usadas.
En este artículo mostramos como hacerlo con varios ejemplos prácticos.

Extraer y mostrar código fuente con JavaScript

Con JavaScript podemos leer y extraer el código fuente usado en cualquier documento HTML, especificando el bloque o elemento con un identificador o usando su nombre.
Posteriormente escribimos la información preferentemente dentro de un elemento PRE, para mantener el formato original.
En los siguientes ejemplos mostramos como escribir el código fuente usado en este mismo artículo en un bloque o sección en formato HTML, en el archivo de estilo CSS y en un script.

Mostrar el código HTML usado en un bloque o sección

Código fuente del bloque anterior escrito automáticamente por JavaScript:

Script que extrae y escribe el código fuente anterior:

<script>
(function () {
  function htmlEscape(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }
  var codfuente1 = htmlEscape(
    document.getElementById("sample1").innerHTML);
  document.getElementById("code1").innerHTML = codfuente1;
})();
</script>

Como se puede comprobar el bloque de ejemplo está encerrado dentro de un contenedor con la ID "sample1" y el PRE donde JavaScript escribe el código posee el ID "code1".

Mostrar el código usado en un archivo de estilo CSS

De forma muy similar al anterior podemos mostrar el código fuente empleado en un archivo de estilo CSS interno o externo.
Solo necesitamos seleccionarlo usando: document.getElementsByTagName("style")[0].
Con el último valor especificamos la ubicación del archivo.
Código fuente del archivo de estilo CSS interno de esta página (minimizado), escrito automáticamente por JavaScript:

Script que extrae y escribe el código fuente anterior:

<script>
(function () {
  function htmlEscape(s) {
    return s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }
  var codfuente2 = htmlEscape(
	document.getElementsByTagName("style")[1].innerHTML);
  document.getElementById("code2").innerHTML = codfuente2;
})();
</script>

En caso de hojas de estilo CSS externas que pueden ser muy extensas, es preferible mostrar el código solo a petición del lector, incluyendo un botón que inicie la función necesaria.
Por ejemplo:
Ver CSS

Mostrar el código usado en un script

Código fuente del script usado en esta página, escrito automáticamente por JavaScript:

El valor "7" hace referencia a la posición del script en el HTML, antecedido por otros que escriben la publicidad.