ソースコードの埋め込みを『Crayon Syntax Highlighter』から『CodePen』に変えてみた

ソースコードの埋め込みを『Crayon Syntax Highlighter』から『CodePen』に変えてみた

WordPressでブログを書いていて、ソースコードを埋め込むのに『Crayon Syntax Highlighter』を使ってた。ハイライト表示も出来るし、ソースコードだけを載せるなら特に不満も無し。

ただ、動作サンプルを載せようとすると別ページで作成したり、iframeで読み込んだり。すごく面倒。なので以前使っていた『CodePen』にまた逆戻り。

なんだかんだ使い心地がよくて、またしばらく『CodePen』を使いそうなので簡単に使い方を紹介しておきます。

『CodePen』新規登録

こちらから新規登録が可能です。

CodePen

右上の『Sign Up』をクリックして必要な情報を入力していきます。
NameとUsernameってのがややこしいですが、Nameはプロフィール名、Usernameはアカウント名で自分のページのurlに反映されます。大文字でも問題なく登録できました。

実際に使ってみる

右上のメニュー『Create』>『New Pen』で新規作成。

作成画面はこんな感じです。
scssも使えるし、jqueryも最初から用意されてて結構使いやすいです。
一つ不満があるとしたらコードの入力補完がポンコツなくらいですかね。まぁ、使い物になりませんw

自分の場合は案件で使ったコードとかが元々あって、それを使い回せるように修正する程度なので入力補完はさほど必要ないですがガシガシこれで書いてくのはちょっと辛いかも。

あ、そうそう。
jqueryの使い方でちょっと迷ったので補足。
jsやcssの横に歯車ボタンがあって、それをクリックするとjqueryなどが読み込めます。

左下の『Quick-add』から必要なものを読み込みます。
urlを指定して自分のサイトや外部サイトからの読み込みも可能。
コードを書いても、大元のjqueryなど読み込んでないと動きませんでした。

ブログに貼り付ける

右下の『Embed』をクリックするとこんな画面が開くのであとは『WordPress Shortcode』、『iframe』、『HTML (recommended)』から好きなのを選んでブログに貼り付けるだけ。

ブログに貼り付けたりしなくても『CodePen』に投稿されているコードを見るだけでもかなり勉強になるので、たまに覗いてはまじか、こんなん出来んのか。。ってなってます。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM