Skip to main content

CodePen埋め込みテスト

このページは、CodePenEmbedコンポーネントのテストページである。

1. デフォルトの埋め込み​

以下は、最小限の指定（slugHashのみ）でCodePenを埋め込んだ例。 デフォルト設定：user="hash52"、HTML + Result表示、編集可能、Docusaurusテーマ連動。

2. CSSタブをデフォルトで開く​

3. JavaScriptタブをデフォルトで開く​

4. Result表示なし（コードのみ）​

5. 編集不可​

6. ライトモード固定​

7. ダークモード固定​

8. カスタム高さ​

9. ソースコード付き（検索対象）​

以下のCodePenには、HTML、CSS、JSのソースコードが不可視で埋め込まれており、サイト内検索の対象になる。

<h1>Hello World</h1>h1 { color: red; }console.log('Hello');

まとめ​

全てのパターンでCodePenが正しく表示され、各オプションが正しく動作すれば、実装は成功である。