インスピレーションと洞察から生成されました 12 ソースから

img6

img7

img8

img9

img10

img11

はじめに

  • CodePenのURLをコピー: CodePenで埋め込みたいコードのページを開き、URLをコピーします。

  • Notionで埋め込み: Notionのページで埋め込みたい場所に移動し、/codeと入力してCodePenの埋め込みメニューを選択します。

  • リンクを貼り付け: 表示された入力欄にコピーしたCodePenのURLを貼り付け、リンクを埋め込むをクリックします。

  • サイズ調整: 埋め込んだCodePenのサイズは、ドラッグで調整可能です。

  • 編集と更新: Notion上では直接編集できませんが、CodePenのオリジナルページで編集し、Notionを再読み込みすると最新の状態が反映されます。

CodePenの基本 [1]

  • CodePenとは: ブラウザ上でHTML、CSS、JavaScriptのコードを記述し、リアルタイムで表示を確認できるサービスです。

  • 無料プラン: 基本的な機能は無料で利用可能で、コードの共有や埋め込みができます。

  • 有料プラン: 複数人での同時編集や非公開設定など、追加機能が利用可能です。

  • コードの保存: アカウントを作成することで、コードを保存し、後で編集することができます。

  • リアルタイムプレビュー: コードを記述すると、即座にプレビューが更新されます。

img6

img7

img8

Notionの機能 [2]

  • コードブロック: Notionでは、プログラムのコードを見やすく表示できるコードブロックを使用できます。

  • 階層構造: ノートを階層構造に整理することができ、情報を効率的に管理できます。

  • マークダウン記法: WordPressのブロックエディターでもおなじみのマークダウン記法が使用可能です。

  • 多様なコンテンツ: プレーンテキスト以外にも、画像やリンクなど多様なコンテンツを追加できます。

  • カスタマイズ性: ページを自由にカスタマイズし、個々のニーズに合わせた情報管理が可能です。

img6

img7

img8

埋め込みの利点 [3]

  • 視覚的な確認: コードの実行結果を視覚的に確認でき、理解が深まります。

  • 信頼性の向上: コードの表示結果も反映されるため、コードの信頼性が高まります。

  • 共有の容易さ: 他のユーザーと簡単にコードを共有でき、共同作業がスムーズになります。

  • 学習の効率化: コーディングの練習や学習に役立ち、効率的にスキルを向上させることができます。

  • ブログへの応用: ブログに埋め込むことで、読者に対してより具体的な情報を提供できます。

img6

img7

よくある問題 [4]

  • コードブロックの選択: Notionでコードブロックを出す際、CodePenが最初に表示されることがあります。

  • 誤操作の防止: /codeと入力するとCodePenが選択されやすく、誤って選択することがあります。

  • 表示の調整: 埋め込んだCodePenのサイズが狭い場合、手動で調整が必要です。

  • 編集の制限: Notion上では直接編集できず、CodePenのオリジナルページでの編集が必要です。

  • 更新の反映: Notionでの表示を最新に保つためには、ページの再読み込みが必要です。

追加のヒント [5]

  • ショートカットの活用: /codeeと入力することで、コードブロックを素早く選択できます。

  • サイズの調整: 埋め込み後のサイズは、ドラッグで簡単に調整可能です。

  • オリジナルページの利用: CodePenのオリジナルページで編集し、Notionで再読み込みすることで最新の状態を反映できます。

  • 他の埋め込み方法: WordPressや他のプラットフォームでも同様に埋め込みが可能です。

  • コードの管理: Notionを使ってコードを階層的に整理し、効率的に管理できます。

関連動画

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "How to Embed Codepen into Notion", "link": "https://www.youtube.com/watch?v=14ljOD5TqxQ", "channel": { "name": ""}, "published_date": "", "length": "3:03" }</div>