
プログラマーがブログ記事を書く時に必須な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” を下記エイリアスに変更して使用します。
言語名 | エイリアス |
---|---|
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 |