SyntaxHighlighter EvolvedでWordPress記事にプログラミングコードを見やすく表示

プログラマーがブログ記事を書く時に必須なWordPressプラグイン。
プログラミングソースコードをWordpress記事で紹介したいときに、ハイライトさせて見やすく表示する方法です。

プラグインSyntaxHighlighter Evolvedをインストールするだけ

WordPressの管理画面からプラグインを1つ入れるだけで非常に簡単です。

プラグインのインストール画面に移動

左カラムから プラグイン＞新規追加 をクリック

SyntaxHighlighter Evolvedを検索

「SyntaxHighlighter Evolved」で検索すると、いくつかプラグインが表示されます。
「SyntaxHighlighter Evolved」の「今すぐインストール」をクリック

インストール完了。プラグインを有効化する

インストール完了画面で「プラグインを有効化」をクリック

プラグイン設定画面を覗いてみる

プラグイン＞ インストール済プラグイン をクリックして、SyntaxHighlighter Evolvedの設定をクリック

SyntaxHighlighter Evolvedプラグインの各種設定が変更できます。
特にデフォルトから変更が必須のものは無いので、そのままでもOKです。
個人的にはコードエディタは黒背景が好きなので、Midnightに変更しました。

バージョンについて

• バージョン2
  オンマウスでツールバーが表示されることと、行の折り返しが可能。
• バージョン3
  ツールバーは表示されません。また、長い行の場合は横スクロールバーが表示されます。
  ソースコードのコピーはドラッグかダブルクリックで選択して行います。

これでインストール完了です。

SyntaxHighlighter Evolvedを使ってみる

テキスト入力モードで、プラグラムソースコードをタグで囲うだけ

表示させたいソースコード

という風に記載します。”alias”の部分を表示させたい言語によって変えます。

例えば、Ojjective-Cを表示したい場合は下記のように記載します。
記事プレビューを開くと、下記のように表示されます。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
}

対応言語とAlias

表示する言語によって、language=”alias”  を下記エイリアスに変更して使用します。