WordPressでhtml等のソースコードの記事を書くプラグイン
ソースコードの記入例を記事に書きたい
Webデザイナーやプログラマーさんはよく紹介記事や備忘録の為にWordpressでブログを開設してますよね。（仕事柄そういう方のブログを見るだけかもしれませんが…）
で、ソースコードの記入例なんてのをブログに載せてるわけですが…
ソースコードの記入例を載せるのに使われてる人気のプラグインがこれ、
「Crayon Syntax Highlighter」
プラグイン検索してインストール、有効可すればすぐに使えます。
使い方
有効化すれば記事を編集する時のメニューにタグっぽいアイコンが出ています。
タグっぽいアイコンをクリックすると、モーダルダイアログっぽいのがが出て来ますので、
そこにソースコードを入力、
「挿入」か「キャンセル」のボタンクリックでダイアログを閉じれるんですが、
これが右上にあるのがワタクシとしては使いにくいなと思ったくらいで、
そこに慣れれば便利便利♪
こういう記事を書くならWordpressって便利だな…って思いました。
もしCMSの入ってないhtmlに直にソースコードの記入例なんて書いたら
そもそも特殊文字使って頑張らないとソースコードとして表示されないし…
Crayon Syntax Highlighterテーマ一覧
Crayon Syntax Highlighterにはデフォルトでかなりのテーマが入っていて、
色々試しても良いんですけどぱっと見一覧ページがあるといいなと思ったのでここにメモっときます。
1c kod
|
1 2 3 4 |
message = "1c Kod!" if message.length > 1 alert message |
1c Zapros
|
1 2 3 4 |
message = "1c Zapros" if message.length > 1 alert message |
809 finest
|
1 2 3 4 |
message = "809finest" if message.length > 1 alert message |
Ado
|
1 2 3 4 |
message = "Ado" if message.length > 1 alert message |
Arduino Ide
|
1 2 3 4 |
message = "Arduino Ide" if message.length > 1 alert message |
Bncplusplus
|
1 2 3 4 |
message = "Bncplusplus" if message.length > 1 alert message |
Capacitacionti
|
1 2 3 4 |
message = "Capacitacionti" if message.length > 1 alert message |
Cg Cookie
|
1 2 3 4 |
message = "Cg Cookie" if message.length > 1 alert message |
Cisco Router
|
1 2 3 4 |
message = "Cisco Router" if message.length > 1 alert message |
Clasic
|
1 2 3 4 |
message = "Classic" if message.length > 1 alert message |
Coda Special Board
|
1 2 3 4 |
message = "Coda Special Board" if message.length > 1 alert message |
Dark Terminal
|
1 2 3 4 |
message = "Dark Terminal" if message.length > 1 alert message |
Eclipse
|
1 2 3 4 |
message = "Eclipse" if message.length > 1 alert message |
Epicgeeks
|
1 2 3 4 |
message = "Epicgeeks" if message.length > 1 alert message |
Familiar
|
1 2 3 4 |
message = "Familiar" if message.length > 1 alert message |
Feeldesign
|
1 2 3 4 |
message = "Feeldesign" if message.length > 1 alert message |
Github
|
1 2 3 4 |
message = "Github" if message.length > 1 alert message |
Idle
|
1 2 3 4 |
message = "Idle" if message.length > 1 alert message |
Inlellij Idea
|
1 2 3 4 |
message = "Inlellij Idea" if message.length > 1 alert message |
Iris Vfx
|
1 2 3 4 |
message = "Iris Vfx" if message.length > 1 alert message |
Light Abite
|
1 2 3 4 |
message = "Light Abite" if message.length > 1 alert message |
Mirc Dark
|
1 2 3 4 |
message = "Mirc Dark" if message.length > 1 alert message |
Monokai
|
1 2 3 4 |
message = "Monokai" if message.length > 1 alert message |
Neon
|
1 2 3 4 |
message = "Neon" if message.length > 1 alert message |
Obsidian
|
1 2 3 4 |
message = "Obsidian" if message.length > 1 alert message |
Obsidian Light
|
1 2 3 4 |
message = "Obsidian Light" if message.length > 1 alert message |
Onderka15
|
1 2 3 4 |
message = "Onderka15" if message.length > 1 alert message |
Orange Code
|
1 2 3 4 |
message = "Orange Code" if message.length > 1 alert message |
Powershell Ise
|
1 2 3 4 |
message = "Powershell Ise" if message.length > 1 alert message |
Pspad
|
1 2 3 4 |
message = "Pspad" if message.length > 1 alert message |
Raygun
|
1 2 3 4 |
message = "Raygun" if message.length > 1 alert message |
Secrets Of Rock
|
1 2 3 4 |
message = "Secrets Of Rock" if message.length > 1 alert message |
Shell Default
|
1 2 3 4 |
message = "Shell Default" if message.length > 1 alert message |
Solarized Dark
|
1 2 3 4 |
message = "Solarized Dark" if message.length > 1 alert message |
Solarized Light
|
1 2 3 4 |
message = "Solarized Light" if message.length > 1 alert message |
Son Of Obsidian
|
1 2 3 4 |
message = "Son Of Obsidian" if message.length > 1 alert message |
Ssms2012
|
1 2 3 4 |
message = "Ssms2012" if message.length > 1 alert message |
Sublime Text
|
1 2 3 4 |
message = "Sublime Text" if message.length > 1 alert message |
Terminal
|
1 2 3 4 |
message = "Terminal" if message.length > 1 alert message |
Tomorrow
|
1 2 3 4 |
message = "Tomorrow" if message.length > 1 alert message |
Tomorrow Night
|
1 2 3 4 |
message = "Tomorrow Night" if message.length > 1 alert message |
Turnwall
|
1 2 3 4 |
message = "Turnwall" if message.length > 1 alert message |
Twilight
|
1 2 3 4 |
message = "Twilight" if message.length > 1 alert message |
Visual Assist
|
1 2 3 4 |
message = "Visual Assist" if message.length > 1 alert message |
Vs2012
|
1 2 3 4 |
message = "Vs2012" if message.length > 1 alert message |
Vs2012 Black
|
1 2 3 4 |
message = "Vs2012 Black" if message.length > 1 alert message |
X3info
|
1 2 3 4 |
message = "X3info" if message.length > 1 alert message |
個人的には Twilight 辺りが好きですね。
エディターの背景が黒いのに慣れてるんで、
ソースコードで背景白いとなんか目がしょぼしょぼするんですよね…
毎度毎度設定してもそれはそれでいいのですが、
「 設定 ＞ Crayon 」から規定値を変更する事が出来ます。
※一応設定のドロップダウンで選択すると見た目確認出来るんですけどね（笑）
ドロップダウンで選択しないと見た目が分からないって結構手間なんだよなぁ…
