こーんなのがあるなんて!!
Crayon Syntax HighlighternもSyntaxHighlighter Evolvedも使ってたけど、どっちもシックリこなくて、ずーーーーーっと探してたんですよぉぉぉぉ
とにかくカッコイイ!!
Web制作に使えるHTML、CSS、JSのコードの投稿・共有が出来るサイトなんだとか。
著作権だとか、使用する上でお約束事があるので、ググってくださいな。
日本語情報少ないので、頑張って英語を読もうw
CodePenとは何か? HTML、CSS、JSのコードを公開共有できるサイト
登録方法や使い方はコチラ CODEPENの使い方 アカウント登録から基本的な操作
そ~し~て~
分からないなりに、リンク表示部分までいったら、
なんと、貼り付け用リンク部分にデフォで「wordpress shortcode」なるものが!?
こりゃ、プラグインあるな。。。( ̄m ̄* )ムフッ♪
ってことで、検索ぅ♪♪
3つ出てきたぞ?(パッと見機能は同じっぽかった)
ひとまず、それっぽい(適当w)CodePen Embedded Pens Shortcode をインスト。
(後ほど確認しました^^ ↑がオフィシャルプラグインです)
設定はあるけど、気にしなくてイイはず。これまた適当w
オフィシャルの使用方法説明はコチラ
そして、投稿画面(ビジュアルエディタ)にショートコードをコピペ!
もう1回書くw
ビジュアルエディタにコピペ!
すごくない!?
してから、表示確認!
(/ ̄ー ̄)/‥∵:*:☆*゜★。::*☆ぶらぼー!!
すごいよコレ!
HTMLをクリックすればHTNLが表示され、ResultをクリックするとHTML+CSSの結果表示になります。
ということで、今から過去記事の書き直しなのです(>▽<)b
と思ったけど、晩飯くって風呂入ったら、ホッコリしてしまったw
面倒だしCrayonと共存できそうなので、過去記事は放置しとくのですヽ( ´ ▽ ` )ノアハハ
便利な使い方とかあれば追記していきます^^
CodePenに公開されてるのを、眺めてるだけでも結構楽しい♪