如何在我的网页中嵌入 CodePen？
How do I embed a CodePen in my web page?
我尝试将 CodePen（来自 codepen.io）添加到我的网页，但它没有按照我想要的方式显示。它只显示文本：'See the Pen ... on CodePen'。 The picture I added shows the embed window on CodePen.
如何正确嵌入 Pen，使其完全显示在我的网页上？抱歉，如果这是一个非常愚蠢的问题，我在 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>
我想知道您的页面是否尚未在线。我最近将 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 URLs.
加载脚本
因此，如果您的站点使用 http，脚本将加载 http。如果您的站点使用 https，它将加载 https。
但是如果您的站点不在服务器上，并且是使用 file:/// 协议打开的，它就不会在您的计算机上找到该资源，因此您需要指定要使用的协议。
您可以使用我们的复制粘贴嵌入代码将 Pen 嵌入其他网站。要获取代码，请单击任意笔上编辑器页脚中的 "Embed" 按钮。或者，从导出菜单中 select "Embed Pen"。
这将打开 Embed Builder。
嵌入生成器可帮助您自定义嵌入。您可以：
选择您的嵌入主题：我们有两个内置主题：Light 和 Dark。每个 CodePen 还拥有一个可定制的个人默认主题。 PRO 会员获得无限的嵌入主题。
选择要显示的选项卡： 嵌入构建器将从您的结果选项卡和您的代码选项卡之一开始 selected。您可以选择不同的代码选项卡，完全关闭代码选项卡以最大化结果，或隐藏结果并最大化代码选项卡。
进行预览 "Click-to-Load": 选中 "use click-to-load" 旁边的复选框以启用嵌入式笔的预览版本。预览嵌入显示带有 "Run Pen" 按钮的 Pen 的静态图像预览。当您的访问者单击按钮时，Pen 将加载。
使嵌入可编辑： PRO 成员可以使他们的嵌入可编辑，就像 CodePen 上的编辑器一样。您可以在我们的 PRO 嵌入文档中阅读有关可编辑嵌入如何工作的更多信息。
设置嵌入高度：拖动嵌入底部的栏以更改其高度。复制和粘贴代码将更新为新的高度。
完成自定义嵌入代码后，从嵌入预览下方的 "Copy & Paste Code" 框中复制代码。将代码粘贴到您的网站中，您的嵌入将出现。
下面是嵌入代码的示例。是 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>
我尝试将 CodePen（来自 codepen.io）添加到我的网页，但它没有按照我想要的方式显示。它只显示文本：'See the Pen ... on CodePen'。 The picture I added shows the embed window on CodePen.
如何正确嵌入 Pen，使其完全显示在我的网页上？抱歉，如果这是一个非常愚蠢的问题，我在 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>
我想知道您的页面是否尚未在线。我最近将 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 URLs.
因此，如果您的站点使用 http，脚本将加载 http。如果您的站点使用 https，它将加载 https。
但是如果您的站点不在服务器上，并且是使用 file:/// 协议打开的，它就不会在您的计算机上找到该资源，因此您需要指定要使用的协议。
您可以使用我们的复制粘贴嵌入代码将 Pen 嵌入其他网站。要获取代码，请单击任意笔上编辑器页脚中的 "Embed" 按钮。或者，从导出菜单中 select "Embed Pen"。
这将打开 Embed Builder。
嵌入生成器可帮助您自定义嵌入。您可以：
选择您的嵌入主题：我们有两个内置主题：Light 和 Dark。每个 CodePen 还拥有一个可定制的个人默认主题。 PRO 会员获得无限的嵌入主题。
选择要显示的选项卡： 嵌入构建器将从您的结果选项卡和您的代码选项卡之一开始 selected。您可以选择不同的代码选项卡，完全关闭代码选项卡以最大化结果，或隐藏结果并最大化代码选项卡。
进行预览 "Click-to-Load": 选中 "use click-to-load" 旁边的复选框以启用嵌入式笔的预览版本。预览嵌入显示带有 "Run Pen" 按钮的 Pen 的静态图像预览。当您的访问者单击按钮时，Pen 将加载。
使嵌入可编辑： PRO 成员可以使他们的嵌入可编辑，就像 CodePen 上的编辑器一样。您可以在我们的 PRO 嵌入文档中阅读有关可编辑嵌入如何工作的更多信息。
设置嵌入高度：拖动嵌入底部的栏以更改其高度。复制和粘贴代码将更新为新的高度。
完成自定义嵌入代码后，从嵌入预览下方的 "Copy & Paste Code" 框中复制代码。将代码粘贴到您的网站中，您的嵌入将出现。
下面是嵌入代码的示例。是 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>