アイデアハッカーアイデアハッカーページの先頭へトップに戻る2015年5月13日Webサービス紹介ブログでコードを公開するために『CodePen』を導入してみたツイートさらばCrayon...俺はCodePenに浮気するぞ!WordPressにはSyntaxHighlighterやCrayonなど、コードを公開する際に便利なプラグインがいくつか存在します。うちは今までCrayonを使っていたんですが、最近CodePenを使っているサイトが多いので乗り換えてみました。超カッコいい...CodePen試しに適当なコードを貼ってみる上部のタブからHTML、CSS、実行結果と、表示を切り替えることが出来ます。CodePen.SublimeTextのような色分けで見やすいです。1つの画面内でコードと実行結果が完結しているというのも分かりやすくてGood!編集画面はこんな感じ左がHTML、中央がCSS、右がJavaScriptの入力画面です。書いたコードはリアルタイムで下部にプレビューされます。SublimeTextに慣れているとコードの分割とか複数選択とかが無いのが少し痛いですが、まぁブログで公開する程度のコードなら問題無し。対応言語HTML,CSS,JavaScriptだけではなく、それぞれの拡張言語も利用可能です。HTMLHamlMarkdownSlimjadeCSSSassScssLessStylusJavaScriptCoffeScriptLiveScriptScssが使える!Scssが使えるよ!!最高!!!とりあえず、エディタも使いやすいし埋め込みも簡単、見やすい上にデザインもクールと、今の所悪いところが見当たらない感じです。日本語の情報が少ないので少し敷居が高いかもしれませんが、英語アレルギーのLeoTiger_7でも問題なく使えたので心配無用です。一応、近々CodePenの利用方法やコード埋め込みの流れを解説する記事を書くつもりですが、それまで待ちきれない!って人は適当に使ってみてください。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。