記事等にソースと実行画面を埋め込めるWebエディタ「codepen」

このエントリーをはてなブックマークに追加


Javascriptの事を調べているとソースコードをcodepenで書いて埋め込んでいる記事・ページが結構ありますね
見た目もデザイン的で訪問者としても結構わかりやすく使いやすい感じでした

https://codepen.io/

codepenの始め方

試しにコードを書いてリアルタイムでの実行結果を表示する事だけなら登録なしでも可能です


ブログ記事に埋め込む等の機能を使うには無料アカウント登録が必要ですがメールアドレスとパスワード、ユーザー名の登録だけでOKでした
Gmailで登録してしばらく経ちますが届いたのはウェルカムメール2通だけでスパム的なメールはなさそうです


codepenの簡単な使い方


作成画面はレスポンシブです
コードタイトルはデフォルトではコードURLになってますが、編集可能で日本語もOK
コンソールログも表示出来るのでデバッグ確認にも使えます


codepenのブログへの埋め込み方

埋め込みコードを取得するには画面下部の「Embed」ボタンから

このコードをブログ記事にコピペするだけですね
確認画面で選択されているコードがデフォルトで表示するコードになり、高さの調節も可能です

codepenのソースコードの複製

本来は誰かが後悔したコードを共有・弄べる様の機能かもですが自分のコードも「Fork」ボタンを押すと新たに新しいコードページとして複製・編集出来ますね

0 件のコメント :