ブログでコードを公開するために『CodePen』を導入してみた

さらばCrayon…俺はCodePenに浮気するぞ！ WordPressにはSyntaxHighlighterやCrayonなど、コードを公開する際に便利なプラグインがいくつか存在します。 うちは今までCrayonを使っていたんですが、最近CodePenを使っているサイトが多いので乗り換えてみました。超カッコいい…

試しに適当なコードを貼ってみる

上部のタブからHTML、CSS、実行結果と、表示を切り替えることが出来ます。

See the Pen YXqzjr by Setoda Kouki (@LeoTiger) on CodePen.

SublimeTextのような色分けで見やすいです。1つの画面内でコードと実行結果が完結しているというのも分かりやすくてGood！

編集画面はこんな感じ

左がHTML、中央がCSS、右がJavaScriptの入力画面です。書いたコードはリアルタイムで下部にプレビューされます。 SublimeTextに慣れているとコードの分割とか複数選択とかが無いのが少し痛いですが、まぁブログで公開する程度のコードなら問題無し。

対応言語

HTML,CSS,JavaScriptだけではなく、それぞれの拡張言語も利用可能です。

HTML

• Haml
• Markdown
• Slim
• jade

CSS

• Sass
• Scss
• Less
• Stylus

JavaScript

• CoffeScript
• LiveScript

Scssが使える！Scssが使えるよ！！最高！！！

---

とりあえず、エディタも使いやすいし埋め込みも簡単、見やすい上にデザインもクールと、今の所悪いところが見当たらない感じです。 まだ日本語の情報が少ないので少し敷居が高いかもしれませんが、英語アレルギーのLeoTiger_7でも問題なく使えたので心配無用です。

一応、近々CodePenの利用方法やコード埋め込みの流れを解説する記事を書くつもりですが、それまで待ちきれない！って人は適当に使ってみてください。