WordPressでHTML/CSS/JavaScript/Objective-Cなどのコードを見やすく表示できるプラグイン「SyntaxHighlighter Evolved」

公開日： 2014/01/05 : 最終更新日：2014/01/05 WordPress

記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

うちのブログでは、「SyntaxHighlighter Evolved」というプラグインを使って、HTML/CSS/JavaScript/Objective-Cなどのコードを見やすく表示できるようにしています。

以下の記事をチェックしてみて下さい。Objective-Cのソースコードが見やすく表示されているはずです。

Objective-Cで文字列（NSString）の連結を行う方法 – 拡張現実ライフ

今回はそんな「SyntaxHighlighter Evolved」の導入方法を紹介したいと思います。

プラグインをインストールする

まずはプラグイン「SyntaxHighlighter Evolved」をWordPressにインストールします。

管理画面の「プラグイン」→「新規追加」にて、「SyntaxHighlighter」で検索します。

検索結果が表示されたら、「SyntaxHighlighter Evolved」の「いますぐインストール」をクリックします。

インストールが完了したら「プラグインを有効化」をクリックします。これでインストールは完了です。

記事内にコードを書く

あとは記事内にコードを書いてみましょう。Objective-Cのコードの場合は、こんな感じで［objc］と［/objc］で囲むだけです。

［objc］
– (IBAction)pressCountRow:(id)sender {
NSInteger numberOfRows = [self.tableView numberOfRowsInSection:0];
NSString *message
= [NSString stringWithFormat:@”row = %d”, numberOfRows];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
message:message
delegate:nil
cancelButtonTitle:nil
otherButtonTitles:@”OK”, nil];
[alert show];
}
［/objc］

すると、以下のように見やすく表示させることができます。

- (IBAction)pressCountRow:(id)sender {
    NSInteger numberOfRows = [self.tableView numberOfRowsInSection:0];
    NSString *message
        = [NSString stringWithFormat:@"row = %d", numberOfRows];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
                                                    message:message
                                                   delegate:nil
                                          cancelButtonTitle:nil
                                          otherButtonTitles:@"OK", nil];
    [alert show];
}

ちなみに、Objective-Cだけでなく、HTMLやCSS、JavaScriptなんかもいけます。

HTMLの場合

HTMLの場合は［html］［/html］で囲みます。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>すいか</li>
</ul>

CSSの場合

CSSの場合は、［css］［/css］で囲みます。

.bannar{
margin:30px 20px 10px 40px;
}

JavaScriptの場合

JavaScriptの場合は、［javascript］［/javascript］で囲みます。

$(function(){
    $(".banner").css("background-color", "white")
});

iOSのSafariでコード部分の行番号がずれて表示される場合

“wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css” を開き、.syntaxhighlighterのスタイルに以下の行を追加してください。

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
  -webkit-text-size-adjust: 100%; /* この行を追加する */
}