Incrustaciones de precarga con carga diferida

Déjame resumir esto:

• CodePen tiene bolígrafos integrados. Cree un bolígrafo en CodePen e incorpórelo en cualquier otro sitio.
• También ofrecemos Prefill Embeds, que eliminan ese primer paso. Con Prefill Embeds, no es necesario que el Pen exista en CodePen en absoluto. Usted pasa el código y la configuración que desea que aparezca en la inserción a través de bloques de código ubicados en la página (¡mejora progresiva!). Ahora ese código puede vivir en su repositorio o base de datos de Git, lo que podría ofrecer un nivel de control más deseable.
• Stephen Shaw detalla cómo se pueden crear estos Prefill Embeds bajo demanda a través de la interacción del usuario (por ejemplo, haga clic en el botón “Ejecutar este código”) para que solo estén ahí cuando un usuario quiera verlos. Esta es una forma súper liviana de agregar interactividad opcional a cualquier publicación o documentación de blog.

Pondré un ejemplo aquí en esta publicación de blog:

h1Hello from HTML/h1

html {  background: black;  color: white;  text-align: center;}h1::after {  content: " / CSS!";}

document.querySelector("h1").innerText += " / JavaScript";

Todo ese código se encuentra aquí en esta publicación de blog, y el iframe del lápiz integrado no se carga hasta que usted hace clic para cargarlo, lo cual puede hacer si está interesado en ver ese código ejecutarse.

Enlace directo →