新 CodePen 功能：预填充嵌入 | CSS-Tricks

我很高兴这个功能已准备好供大家使用。您可以将任何 <pre> 块的 HTML、CSS 和 JavaScript（或它们的任何组合）增强为嵌入，这意味着您可以看到渲染后的输出。非常适合渐进增强！它还允许您传入外部资源，使其成为文档网站或类似网站的绝佳选择。

这里有一个示例

<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')
);

您看不见的是，这块内容追加到了嵌入片段中

<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>

如果我想更新该演示，我可以通过编辑这篇博文来完成。无需返回 CodePen。 🙌

直接链接 →

Chris Morgan

# 2019 年 1 月 21 日

降级形式将是对 RSS 阅读器的一个重大改进，但目前至少在 RSS 阅读器中有些问题，因为 style="height: 300px;"（顺便说一句，它是重复的）和缺少 overflow: auto。因此，内容会溢出到后面的内容上。我最喜欢的修复方法是删除 height 样式，但添加 overflow: auto 也能解决问题。

Chris Coyier

评论永久链接# 2019 年 1 月 23 日

嘿，Chris！

你说得对，这将是对 RSS 阅读器的一个重大改进。 height: 300px 是此网站独有的，我在玩这个概念。通常，高度根本不会设置，而在该网站上，我将更新它以更好地处理。

评论