プラグイン「Crayon Syntax Highlighter」によるプログラムの表示

ウェブサイト上にプログラムのコードを表示・掲載する方法は幾つかあると思いますが、今回は「Crayon Syntax Highlighter」というWordPressのプラグインを利用したプログラムの表示について紹介します。


  • Sponsored Link

    コードを表示する方法

プログラムのコードをウェブサイトにそのまま貼り付けてしまうと見栄えが悪く、何かと使い勝手が良くないので、こういう時にこそプラグインの力を借りましょう。

コードをサイト上で表示するときに重宝するのがこの「Crayon Syntax Highlighter」というプラグインです。勿論他にも色々なプラグインはあるのですが、シンプルで使いやすくユーザーも多いので、当サイトでもこのプラグインを採用することにしました。

「Crayon Syntax Highlighter」を利用すると、例えば以下のようになります。

これはC言語によるプログラムで、$n$未満のフィボナッチ数とそれらの和を偶数値の項、奇数値の項別に求めるプログラムです(大したプログラムではありませんが・・・)。

勿論、コンパイル(機械が読み込めるように翻訳すること)しないとプログラムは動作しませんから、どうしても動かしたいという方は「repl.it」(外部リンク)などの、オンラインで開発環境を提供しているサイトで実行してみて下さい。

実行結果の例($n=4000$ の場合)は以下のようになります。数値は赤字で表示されています。

ちゃんと動作しているのが分かると思います。因みにこの実行結果の例も「Crayon Syntax Highlighter」で表示しており、行数と背景ラインをカットしています。設定を少しいじれば背景色を変えたり行数を非表示にすることもできます。


  • Crayon Syntax Highlighter のテーマ例

このように「Crayon Syntax Highlighter」ではコードや実行結果を綺麗に表示できますし、フォントや色彩、余白などを変更できることも、このプラグインの魅力です。行間の幅なども細かく設定することができますので、それぞれのウェブサイトに合ったテイストでコードを掲載することができます。

以下、管理人のための備忘録を兼ねて、各テーマによる表示を列挙しておきます。なお、コードは世界に向けて挨拶する超入門編のコードです。なお文字フォントは「Arial」を使用しています。

・テーマ「Classic」(デフォルトのテーマ)

 

・テーマ「1c Zapros」

 

・テーマ「Dark Terminal」

 

・テーマ「Familiar」

 

・テーマ「Feeldesign」

 

・テーマ「Github」

 

・テーマ「Inlellij Idea」

 

・テーマ「Kayote」

 

・テーマ「Light Abite」

 

・テーマ「Mirc Dark」

 

・テーマ「Monokai」

 

・テーマ「Plain White」

 

・テーマ「Powershell」

 

・テーマ「Onderka15」

 

・テーマ「Secrets Of Rock」

 

・テーマ「Solarized Light」

 

・テーマ「Terminal」

 

・テーマ「Twilight」

 

・テーマ「Visual Assist」

 

・テーマ「Vs2012」

 

・テーマ「Vs2012 Black」

 

・テーマ「X3info」

 

いかがでしょう?これらの他にもまだ多くのテーマがあり、色合いは勿論、枠線の有無や形状、太さなどを変えたりすることもできるのです。テーマを変更すればコードを派手に飾ることもできますが、やはり「Classic」に落ち着きますね(笑)。


(コメント)

以上「Crayon Syntax Highlighter」の使用例をご紹介しました。このプラグインは外国産ということもあり、あまり日本語で解説しているページは無いようです。・・・というわけで今回紹介した次第。少しでもどなたかのお役に立てば幸いです。

Sponsored Link

 

Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です