Nueva función de CodePen: incrustaciones de precarga

Estoy muy emocionado de que esta función esté lista para todos ustedes. Puede tomar cualquier prebloque de HTML, CSS y JavaScript (o cualquier combinación de ellos) y mejorarlo para insertarlo, lo que significa que puede ver el resultado renderizado. ¡Muy amigable con la mejora progresiva! También le permite pasar cosas como recursos externos, lo que lo convierte en una excelente opción para, por ejemplo, sitios de documentación o similares.

Aquí hay un ejemplo:

Lo que no puedes ver es este bloque, adjunto al fragmento de inserción:

pre data-lang="html"div/div/prepre data-lang="scss" @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");body {  margin: 0;  font-family: Montserrat, sans-serif;}header {  background: #7B1FA2;  color: white;  padding: 2rem;  font-weight: bold;  font-size: 125%}/pre  pre data-lang="babel"class NavBar extends React.Component {  render() {    return(      header        Hello World, {this.props.name}!      /header    );  }}ReactDOM.render(  NavBar name="Chris" /,  document.getElementById('root'));/pre

Si quiero actualizar esa demostración, puedo hacerlo editando esta publicación de blog. No es necesario volver a CodePen.