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

公開日: : 最終更新日: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%; /* この行を追加する */
}

@akio0911はこう思った。

というわけで、「SyntaxHighlighter Evolved」を使うと、WordPress上でソースコードを見やすく表示できます。

“wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/” あたりを見ると、見やすく表示できるコードの拡張子が分かりますので、ぜひチェックしてみて下さい。

関連記事

サンフランシスコのピア39にあるチャウダーズでクラムチャウダーを食す!

lolipop アップルの開発者向けイベント「WWDC2014」

ミスドのカルピスドーナツとカルピスポンデリングを食べてみた!

ミスドで期間限定のカルピスコラボ商品「カルピスドーナツ」と「カルピ

十三カレー計画で牛すじカレーネギのせを食す!(大阪・十三)

「iPhoneアプリ開発キャンプ@大阪」のランチで、十三カレー計画

大阪・難波の加寿屋 法善寺でかすうどんを食す。ランチタイムはおにぎり2個まで無料!

大阪・難波の加寿屋 法善寺 (かすうどん KASUYA)で、かす

ライブドアブログで運営していた「あきお商店」を「卵は世界である」に改名しました

少し前からライブドアブログで「あきお商店」というブログをやって

→もっと見る

PAGE TOP ↑