ソースコード埋め込み

ブログに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」はコードのみを表示したいときに利用できますね。

これから用途にあわせてどんどん活用していこうと思います。