ブログにhtmlやcssのソースコードを埋め込んでいるのをよく目にします。
どうやっているのか調べて実際にソースコードを埋め込んでみました。
CODEPENで埋め込み
さっそくcodepenを貼り付けてみました。
See the Pen QWWepoY by reirei (@sugoi-reirei) on CodePen.
これでよく使うcssなどをブログに記事として残すことができますね。
私はよくCSSを忘れてしまうのでありがたいサービスです。
「codepen」はメールアドレスのみでアカウントを作成することができます。
Gistで埋め込み
HTMLの埋め込み
CSSの埋め込み
JavaScriptの埋め込み
PHPの埋め込み
GitHubにアカウントを登録し、他のサイトの情報を頼りに埋め込むことができました。
Sublime Text風にカスタマイズ
Gistのデフォルトのデザインが好みではなかったので、普段から使用している「Sublime Text」風にカスタマイズしました。
コードは以下になります。
やはり普段から使用している見た目の方が落ち着きますね。
おわり
「CODEPEN」はコードとプレビュー表示があるのがいいですね。
「Gist」はコードのみを表示したいときに利用できますね。
これから用途にあわせてどんどん活用していこうと思います。