2015/01/08
目次
sponsored link
Crayon Syntax Highlighte
プログラムやCSSなどのソースコードをきれいに表示してくれるWordPressプラグインです。
インストールと有効化
ダッシュボード→プラグイン→新規追加を選んでください。
その後、"AddQuickTag"で検索→いますぐインストール→有効化します。
テキストエディタにcrayonボタンが追加される
インストールして有効化するだけで『crayon』ボタンがエディタに追加されます。
位置はタブオーダーによって変わると思うので、どこに追加されたか確認しておいてください。
設定は日本語対応
設定画面は最初から日本語に対応しています。
特にデフォルトから変更する必要はなさそうです。
crayonボタンを押して入力するだけ
テキストエディタでcrayonボタンを押すと、専用のエディタがポップアップします。
エディタ画面も最初から日本語化されています。
何も設定を変更せずに各言語のHello worldプログラムのソースを入力し、挿入を押した結果が下記です。
Perlだけ気になりますが、他の各言語では自動判別されていますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* C */ #include <stdio.h> int main(void) { printf("Hello, world!"); return 0; } /* JAVA */ public class Hello { public static void main (String [] args) { System.out.println ("Hello, world!"); } } /* JavaScript */ <script type="text/javascript"> document.body.appendChild(document.createTextNode("Hello World!")); </script> /* Perl */ print "Hello, world!\n"; /* PHP */ <?php echo 'Hello, world!'; exit; ?> |
さらに、上記で挿入されたHTMLソースは下記のとおりです。
大なり小なりなどの文字がHTMLのエスケープ文字に自動変換されていますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<pre class="lang:default decode:true " title="Hello world表示サンプル" >/* C */ #include <stdio.h> int main(void) { printf("Hello, world!"); return 0; } /* JAVA */ public class Hello { public static void main (String [] args) { System.out.println ("Hello, world!"); } } /* JavaScript */ <script type="text/javascript"> document.body.appendChild(document.createTextNode("Hello World!")); </script> /* Perl */ print "Hello, world!\n"; /* PHP */ <?php echo 'Hello, world!'; exit; ?> |
気になったPerlを明示的に指定してみると
PerlのソースだけをDefaultで挿入してもハイライトしてくれないようですが、
明示的に『プログラム言語』でPerlを指定すれば問題ないようです。
|
1 2 |
/* Perl */ print "Hello, world!\n"; |
|
1 2 |
/* Perl */ print "Hello, world!\n"; |
カスタマイズの自由度が高いが設定いらず
カスタマイズしようと思えば自由度は高いようです。
しかし、何といってもインストールしてから何も変更しなくてもよい手軽さが魅力ですね！
