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

maxresdefault

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

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

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

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

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

SyntaxHighlighter Evolvedを検索
2

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

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

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

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

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

5

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

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

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

SyntaxHighlighter Evolvedを使ってみる

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

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

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

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

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

    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
}
対応言語とAlias

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

言語名 エイリアス
ActionScript3 ActionScript3
Bash/shell bash, shell
Clojure clojure
ColdFusion coldfusion
C/C++ c, cpp
C# csharp
CSS css
Delphi delphi
Erlang erlang
F# fsharp
Diff diff
Groovy groovy
HTML html
JavaScript js, javascript
Java java
JavaFX javafx
MATLAB matlab (keywords only)
Objective-C objc
Perl perl
PHP php
Text text
PowerShell powershell
Python python
R r
Ruby ruby
Scala scala
SQL sql
Visual Basic vb
XML xml