kwmaster HTML/CSS/JavaScriptのコードの管理に便利なCodePenですが、独自の分類や整理をしたいという場合にはNotionと組み合わせることで活用の幅が広がりそうですので、その方法の備忘録です。
CodePenで該当のコードのあるpenを開いて、URLをコピーします
Notionで埋め込みたい場所で / を入力し、CodePen Embed a Codepen.を選択
/ の後に、codeやcodepenなどと入力すると絞り込みされて選びやすくなります
入力欄に、CodePenでコピーしたURLをペーストして、Embed Linkをクリックします
埋め込んだCodePenが狭い場合は、ドラッグで広げます
※上記の埋め込んだ状態では、Notionでは参照はできますが、直接penの内容の変更などはできません。
埋め込んだpenの右上のOriginalのボタンをクリックすると、新しいタブでCodePenが開きますのでログインしていればその画面で編集や保存は可能です。Notionのページでは再読み込みすると最新の状態のpenが表示されます。
CodePenだけで管理するより一見複雑ですが、Notionには、/codeでコードを記載できたり、WordPressのブロックエディターでもおなじみのマークダウン記法が使えたり、ノートを階層構造にできたり様々な活用ができます。
Notionの画面に、CodePenを埋め込むとともに、独自のメモを記載したり、参考URLを記載したり、スクリーンショットを貼ったりなどいろいろな方法でわかりやすく管理ができそうだと思います。