WordPressシンタックスハイライト - Google AdMob iOS とPython・Cocoon・WordPress

WordPressの記事にプログラムのソースコードを記述するときは、WordPressに標準で備わっている「コード」ブロックを挿入して、この中にプログラムのソースコードを記述します。このコードブロックは標準のものなので簡素なものになっっていますが、ちょっと長いソースコードを記述する時は、読み易く多機能なブロックを使いたくなってきます。シンタックスハイライトとはソースコードを読み易くする機能の事でプラグインをインストールすると使用できます。ここではシンタックスハイライトのプラグインをご紹介します。

シンタックスハイライトのプラグイン

シンタックスハイライトのプラグイン

シンタックスハイライトのプラグインで有名なものに、Crayon Syntax Highlighterがあります。下図のようなスクリーンショットで、おそらく一度はどこかのサイトで見た事があると思います。ただ、このプラグインは数年前から更新が止まっているため、ここでは別のプラグインをご紹介します。

プラグインのインストール

シンタックスハイライトのプラグインは多くあるのですが、ここではHighlighting Code Blockをご紹介します。

ナビゲーションメニューの[プラグイン]の中の[新規追加]をクリックします。

プラグインを追加の画面で「Highlighting Code Block」で検索します。プラグインが表示されたら、[今すぐインストール]をクリックします。

インストールが完了したら[有効化]をクリックします。

コードのブロックを挿入

早速、コードを挿入してみましょう。いつものように[＋]ボタンをクリックすると、追加するブロックが表示されます。表示されたブロックの中の[Highlighting Code Block]をクリックします。

追加したブロックの中にソースコードを記載してみます。下記はObjective-Cのソースコードを記載した例です。ソースコードの右上に言語名やコピーボタンが表示されていて、ソースコードの長さに応じて自動的にスクロールバーが表示されるようになります。

if (flagRoutePB==1) {
        //エラー表示のクリア
        SKSpriteNode* emoji = (SKSpriteNode*)[self childNodeWithName:@"Eramoji"];
        emoji.alpha = 0.0;
}

標準のコードのブロックより、見やすくなりましたね。