埋め込みCodePenはサイト

Question

次のコードは、私のWebページに追加されているとのライブCodePenの画像をレンダリングする必要がある上でレンダリングではないが、代わりにそれが表示し、リンクを示しています。CodePenではない理由について

<p>Fitness app</p> 
<div class="w3-half w3-grayscale-max"> 
    <p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p> 
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> 
</div> 

任意のアイデアを完全にレンダリング？ありがとう！

Answer 1

CodePenページの右下にの埋め込みボタンをクリックします。そこから、あなたのWebページに埋め込まれているようにペンを表示する方法を選択することができます。次にコピー&ペーストコードを選択します。

あなたの問題のスニペットは、必要なデータ属性を持っていないように見えます：

<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p> 

あなたがCodePenのブログにembedding pensについての詳細を読むことができます。