こーんなのがあるなんて!!

Crayon Syntax HighlighternもSyntaxHighlighter Evolvedも使ってたけど、どっちもシックリこなくて、ずーーーーーっと探してたんですよぉぉぉぉ

Codepen

とにかくカッコイイ!!

Web制作に使えるHTML、CSS、JSのコードの投稿・共有が出来るサイトなんだとか。

著作権だとか、使用する上でお約束事があるので、ググってくださいな。

日本語情報少ないので、頑張って英語を読もうw

CodePenとは何か? HTML、CSS、JSのコードを公開共有できるサイト

登録方法や使い方はコチラ CODEPENの使い方 アカウント登録から基本的な操作

 

そ~し~て~

分からないなりに、リンク表示部分までいったら、

なんと、貼り付け用リンク部分にデフォで「wordpress shortcode」なるものが!?

Capture_2015_02_25_17_32_50_637

こりゃ、プラグインあるな。。。( ̄m ̄* )ムフッ♪

ってことで、検索ぅ♪♪

3つ出てきたぞ?(パッと見機能は同じっぽかった)

ひとまず、それっぽい(適当w)CodePen Embedded Pens Shortcode をインスト。

(後ほど確認しました^^ ↑がオフィシャルプラグインです)Capture_2015_02_25_17_47_03_195

設定はあるけど、気にしなくてイイはず。これまた適当w

オフィシャルの使用方法説明はコチラ

そして、投稿画面(ビジュアルエディタ)にショートコードをコピペ!

もう1回書くw

ビジュアルエディタにコピペ!

すごくない!?

Capture_2015_02_25_17_22_06_894

してから、表示確認!

Capture_2015_02_25_17_22_42_535

(/ ̄ー ̄)/‥∵:*:☆*゜★。::*☆ぶらぼー!!

すごいよコレ!

HTMLをクリックすればHTNLが表示され、ResultをクリックするとHTML+CSSの結果表示になります。

 

ということで、今から過去記事の書き直しなのです(>▽<)b

と思ったけど、晩飯くって風呂入ったら、ホッコリしてしまったw

面倒だしCrayonと共存できそうなので、過去記事は放置しとくのですヽ( ´ ▽ ` )ノアハハ

便利な使い方とかあれば追記していきます^^

CodePenに公開されてるのを、眺めてるだけでも結構楽しい♪