SyntaxHighlighter3を導入してみました

今後ブログにはソースコードを貼り付けていくと思うので、SyntaxHighlighterというJavascriptのライブラリを導入してみました。これを使うと、下記のようにソースコードを綺麗に表示できるようになります。
#include<stdio.h>
int main(void)
{
     printf("Hello World!!");
     return 0;
}

ざっと他サイトで導入する方法を読んでやってみてましたが、少し時間がかかったので私のしたことについて記述しておきます。

１.  SyntaxHighlighterをダウンロードする

ダウンロードページにアクセスしてClick here to downloadよりダウンロードします。

SyntaxHighlighter

２. サーバにアップロードする

ダウンロードしたフォルダの中身を見ると下記写真のようになっていると思います。

SyntaxHighlighterフォルダ


今回使用するのはscriptsとstylesの２つで、これらを自分のサーバにアップロードします。
フォルダの名前は適当に変更して構いません。以下アップロードした例となります。
それぞれ名前をscripts→js、styles→cssと変更しました。

SyntaxHighlighterをサーバにアップロード



３. プラグインを追加する

アメブロにはプラグインの追加という項目があります。
今回はプラグインの追加のフリープラグインを利用しました。

アメブロ（プラグイン）


フリープラグインには禁止タグ等の制限がないようです。
そこで以下のコードを利用しました。（itboyさんの記事を参考にさせて頂きました。）

 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="http://自分のサーバURL/scripts/shCore.js" type="text/javascript"></script>
<script src="http://自分のサーバURL/scripts/shAutoloader.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $("head").append('<link rel="stylesheet" href="http://自分のサーバURL/styles/shThemeDefault.css" type="text/css" />');
  $("head").append('<link rel="stylesheet" href="http://自分のサーバURL/styles/shCore.css" type="text/css" />');
 
  function path() {
    var args = arguments,
    result = [];
 
    for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://自分のサーバURL/scripts/'));
 
    return result
  }
 
  SyntaxHighlighter.autoloader.apply(null, path(
    'applescript            @shBrushAppleScript.js',
    'actionscript3 as3      @shBrushAS3.js',
    'bash shell             @shBrushBash.js',
    'coldfusion cf          @shBrushColdFusion.js',
    'cpp c                  @shBrushCpp.js',
    'c# c-sharp csharp      @shBrushCSharp.js',
    'css                    @shBrushCss.js',
    'delphi pascal          @shBrushDelphi.js',
    'diff patch pas         @shBrushDiff.js',
    'erl erlang             @shBrushErlang.js',
    'groovy                 @shBrushGroovy.js',
    'java                   @shBrushJava.js',
    'jfx javafx             @shBrushJavaFX.js',
    'js jscript javascript  @shBrushJScript.js',
    'perl pl                @shBrushPerl.js',
    'php                    @shBrushPhp.js',
    'text plain             @shBrushPlain.js',
    'py python              @shBrushPython.js',
    'ruby rails ror rb      @shBrushRuby.js',
    'sass scss              @shBrushSass.js',
    'scala                  @shBrushScala.js',
    'sql                    @shBrushSql.js',
    'xml xhtml xslt html    @shBrushXml.js'
  ));
  SyntaxHighlighter.all();
 
});
</script>
追加したコードの１行目と２行目については既に記述している方は必要ありません。記述していなかった方はjquery.comより最新バージョンが提供されているかもしれないので確認してみて下さい。

４．フリープラグインを使用する機能に移動させる

初めてフリープラグインを利用する場合は、フリープラグインが有効になっていません。そこで、写真のようにフリープラグインを使用する機能に移動させる必要があります。

フリープラグインへ移動させる


５．実際に記事を書いてみる

お疲れ様でした！以上でSyntaxHighlighterの設定は完了です。
それでは、実際に記事へソースコードを貼り付けてみます。

 
#include<stdio.h>
int main(void)
{
     printf("Hello World!!");
     return 0;
}

このようにコードを表示させたい場合は、ソースコードを「pre」タグで囲います。

 
<pre class="brush: c toolbar: false;" title="こんにちは世界">
#include<stdio.h>
int main(void)
{
     printf("Hello World!!");
     return 0;
}
</pre>

といった感じです。