我尝试将 CodePen（来自 codepen.io）添加到我的网页，但它没有按我想要的方式显示。它只显示文本：'See the Pen ... on CodePen'。 The picture I added shows the embed window on CodePen.
如何正确嵌入触控笔，使其完全显示在我的网页上？抱歉，如果这是一个非常愚蠢的问题，我仍然是 HTML 的菜鸟。
【问题讨论】：
要在本地使用，请替换
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
有
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
为什么？
如您所见，默认脚本的src 以//assets... 开头。
他们删除了 URL 中的协议，以便它自动匹配您自己的。这是常见的做法，因为https 站点不允许使用http URL 加载脚本。
因此，如果您的网站使用http，则脚本将使用http 加载。如果您的网站使用https，它将加载https。
但是如果您的站点不在服务器上，并且使用file:/// 协议打开，它就不会在您的计算机上找到该资源，因此您需要指定要使用的协议。
【讨论】：
我想知道您的页面是否还没有上线。我最近将 codepen 嵌入到我自己的网页中，我注意到我在本地计算机上看不到它，但是当我将我的 html 上传到我的服务器时，它就在那里。
【讨论】：
我没有发现问题，您只需复制为您提供 Codepen 的代码：
<p>Codepen embed:</p>
<p data-height="265" data-theme-id="0" data-slug-hash="vGNKNj" data-default-tab="css,result" data-user="blonfu" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/blonfu/pen/vGNKNj/">Modificar color de texto según fondo (stylus)</a> by blonfu (<a href="http://codepen.io/blonfu">@blonfu</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>【讨论】：
您可以使用我们的复制粘贴嵌入代码将 Pen 嵌入其他网站。要获取代码，请单击任意笔上编辑器页脚中的“嵌入”按钮。或者，从导出菜单中选择“嵌入笔”。
这将打开嵌入生成器。
嵌入生成器可帮助您自定义嵌入。你可以：
选择您的嵌入主题：我们有两个内置主题：浅色和深色。每个 CodePen 还拥有一个可定制的个人默认主题。 PRO 会员可获得无限的嵌入主题。
选择要显示的选项卡：嵌入构建器将从您的结果选项卡开始，并选择您的代码选项卡之一。您可以选择不同的代码选项卡，完全关闭代码选项卡以最大化结果，或隐藏结果并最大化代码选项卡。
预览“点击加载”：选中“使用点击加载”旁边的复选框，为您的嵌入式触控笔启用预览版本。预览嵌入显示带有“运行笔”按钮的笔的静态图像预览。当您的访问者单击按钮时，Pen 将加载。
使嵌入可编辑： PRO 成员可以使他们的嵌入可编辑，就像 CodePen 上的编辑器一样。您可以在我们的 PRO Embeds 文档中详细了解可编辑嵌入的工作原理。
设置嵌入高度：拖动嵌入底部的栏以更改其高度。复制和粘贴代码将更新为新的高度。
完成自定义嵌入代码后，从嵌入预览下方的“复制和粘贴代码”框中复制代码。将代码粘贴到您的网站中，您的嵌入将出现。
这是嵌入代码的示例。它是 HTML：
<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>
【讨论】：