Neues CodePen-Feature: Prefill Embeds

Ich bin sehr aufgeregt, dass dieses Feature für euch alle bereit ist. Sie können jeden <pre>-Block mit HTML, CSS und JavaScript (oder einer beliebigen Kombination davon) nehmen und ihn zu einem Embed verbessern, was bedeutet, dass Sie das gerenderte Ergebnis sehen können. Sehr progressiv progressive Verbesserung-freundlich! Es ermöglicht Ihnen auch, Dinge wie externe Ressourcen zu übergeben, was es zu einer guten Wahl für Dokumentationsseiten oder ähnliches macht.

Hier ist ein Beispiel

<div id="root"></div>

@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%
}

class NavBar extends React.Component {
  render() {
    return(
      <header>
        Hello World, {this.props.name}!
      </header>
    );
  }
}
ReactDOM.render(
  <NavBar name="Chris" />,
  document.getElementById('root')
);

Was Sie nicht sehen können, ist dieser Block, der dem Embed-Snippet angehängt ist

<pre data-lang="html"><div id="root"></div></pre>
<pre 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>

Wenn ich diese Demo aktualisieren möchte, kann ich das tun, indem ich diesen Blogbeitrag bearbeite. Ich muss nicht zurück zu CodePen. 🙌

Direkter Link →