WordPressの記事にプログラムのソースコードを記述するときは、WordPressに標準で備わっている「コード」ブロックを挿入して、この中にプログラムのソースコードを記述します。このコードブロックは標準のものなので簡素なものになっっていますが、ちょっと長いソースコードを記述する時は、読み易く多機能なブロックを使いたくなってきます。シンタックスハイライトとはソースコードを読み易くする機能の事でプラグインをインストールすると使用できます。ここではシンタックスハイライトのプラグインをご紹介します。
シンタックスハイライトのプラグイン
シンタックスハイライトのプラグインで有名なものに、Crayon Syntax Highlighterがあります。下図のようなスクリーンショットで、おそらく一度はどこかのサイトで見た事があると思います。ただ、このプラグインは数年前から更新が止まっているため、ここでは別のプラグインをご紹介します。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs122.png?resize=800%2C450&ssl=1)
プラグインのインストール
シンタックスハイライトのプラグインは多くあるのですが、ここではHighlighting Code Blockをご紹介します。
ナビゲーションメニューの[プラグイン]の中の[新規追加]をクリックします。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs123.png?resize=800%2C450&ssl=1)
プラグインを追加の画面で「Highlighting Code Block」で検索します。プラグインが表示されたら、[今すぐインストール]をクリックします。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs124.png?resize=800%2C450&ssl=1)
インストールが完了したら[有効化]をクリックします。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs125.png?resize=800%2C450&ssl=1)
コードのブロックを挿入
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs129.png?resize=550%2C900&ssl=1)
早速、コードを挿入してみましょう。いつものように[+]ボタンをクリックすると、追加するブロックが表示されます。表示されたブロックの中の[Highlighting Code Block]をクリックします。
追加したブロックの中にソースコードを記載してみます。下記はObjective-Cのソースコードを記載した例です。ソースコードの右上に言語名やコピーボタンが表示されていて、ソースコードの長さに応じて自動的にスクロールバーが表示されるようになります。
if (flagRoutePB==1) {
//エラー表示のクリア
SKSpriteNode* emoji = (SKSpriteNode*)[self childNodeWithName:@"Eramoji"];
emoji.alpha = 0.0;
}
標準のコードのブロックより、見やすくなりましたね。
Highlighting Code Blockの設定
シンプルな機能のプラグインですが、カスタマイズも可能です。ナビゲーションメニューの[設定]の中の[[HCB]設定]をクリックします。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs127.png?resize=800%2C450&ssl=1)
カラーやフォントサイズ、表示項目をお好みに合わせて設定します。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs128.png?resize=800%2C450&ssl=1)
設定が終わったら画面を下にスクロールして[変更を保存]をクリックします。
![](https://i0.wp.com/koremo2020.com/wp/wp-content/uploads/2021/02/scs130.png?resize=800%2C450&ssl=1)
サイトの雰囲気に合わせて使い分けてみましょう。