ウェブサイト上にプログラムのコードを表示・掲載する方法は幾つかあると思いますが、今回は「Crayon Syntax Highlighter」というWordPressのプラグインを利用したプログラムの表示について紹介します。
コードを表示する方法
プログラムのコードをウェブサイトにそのまま貼り付けてしまうと見栄えが悪く、何かと使い勝手が良くないので、こういう時にこそプラグインの力を借りましょう。
コードをサイト上で表示するときに重宝するのがこの「Crayon Syntax Highlighter」というプラグインです。勿論他にも色々なプラグインはあるのですが、シンプルで使いやすくユーザーも多いので、当サイトでもこのプラグインを採用することにしました。
「Crayon Syntax Highlighter」を利用すると、例えば以下のようになります。
|
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 29 30 31 |
#include <stdio.h> int main(void) { int f0,f1,f2,sum,sume,sumo,v; f0 = 0; f1 = 1; sum = 0; sume = 0; sumo = 0; printf("n未満のフィボナッチ数と、それらの和を求めます。\n"); printf("n="); scanf("%d",&v); while (f0 < v) { printf("%d...%d \n",i,f0); f2 = f0 + f1; sum = sum + f0; if (f0 % 2 == 0){ sume = sume + f0; } else { sumo = sumo + f0; } f0 = f1; f1 = f2; } printf("これらの和は%dです。 \n",sum); printf("これらのうち偶数値の項の和は%dです。 \n",sume); printf("これらのうち奇数値の項の和は%dです。 \n",sumo); return 0; } |
これはC言語によるプログラムで、$n$未満のフィボナッチ数とそれらの和を偶数値の項、奇数値の項別に求めるプログラムです（大したプログラムではありませんが･･･）。
勿論、C言語の場合はコンパイル（機械が読み込めるように翻訳すること）しないといけないので、コンパイラの無い方は「repl.it」（外部リンク）などの、オンラインで開発環境を提供しているサイトで実行してみて下さい。
実行結果の例（$n=4000$ の場合）は以下のようになります。数値は赤字で表示されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
n未満のフィボナッチ数と、それらの和を求めます。 n=4000 1...0 2...1 3...1 4...2 5...3 6...5 7...8 8...13 9...21 10...34 11...55 12...89 13...144 14...233 15...377 16...610 17...987 18...1597 19...2584 これらの和は6764です。 これらのうち偶数値の項の和は3382です。 これらのうち奇数値の項の和は3382です。 |
ちゃんと動作しているのが分かると思います。因みにこの実行結果の例も「Crayon Syntax Highlighter」で表示しており、行数と背景ラインをカットしています。設定を少しいじれば背景色を変えたり行数を非表示にすることもできます。
Crayon Syntax Highlighter のテーマ例
このように「Crayon Syntax Highlighter」ではコードや実行結果を綺麗に表示できますし、フォントや色彩、余白などを変更できることも、このプラグインの魅力です。行間の幅なども細かく設定することができますので、それぞれのウェブサイトに合ったテイストでコードを掲載することができます。
以下、管理人のための備忘録を兼ねて、各テーマによる表示を列挙しておきます。なお、コードは世界に向けて挨拶する超入門編のコードです。なお文字フォントは「Arial」を使用しています。
・テーマ「Classic」（デフォルトのテーマ）
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「1c Zapros」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Dark Terminal」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Familiar」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Feeldesign」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Github」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Inlellij Idea」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Kayote」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Light Abite」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Mirc Dark」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Monokai」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Plain White」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Powershell」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Onderka15」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Secrets Of Rock」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Solarized Light」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Terminal」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Twilight」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Visual Assist」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Vs2012」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「Vs2012 Black」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
・テーマ「X3info」
|
1 2 3 4 5 6 7 |
#include <stdio.h> int main(void) { printf("HelloWorld"); return 0; } |
いかがでしょう？これらの他にもまだ多くのテーマがあり、色合いは勿論、枠線の有無や形状、太さなどを変えたりすることもできるのです。テーマを変更すればコードを派手に飾ることもできますが、やはり「Classic」に落ち着きますね(笑)。
（コメント）
以上「Crayon Syntax Highlighter」の使用例をご紹介しました。このプラグインは外国産ということもあり、あまり日本語で解説しているページは無いようです。･･･というわけで今回紹介した次第。少しでもどなたかのお役に立てば幸いです。