FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。

ブログ記事の中にHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterを導入することにしました。
SyntaxHighlighterを使うとweb上でソースコードを表示した時に、非常にキレイに表示してくれます。
こんなカンジです。

<script type="text/javascript" src="blog/shCore.js"></script>
<script type="text/javascript" src="blog/shAutoloader.js"></script>

1 2	<script type="text/javascript" src="blog/shCore.js"></script> <script type="text/javascript" src="blog/shAutoloader.js"></script>

ソースコード上でダブルクリックするとコードが全選択状態になるのでコピーが簡単にできます。以下、SyntaxHighlighterの導入メモを備忘録として残しておこうと思います。

§1 SyntaxHighlighterの入手

最初に、SyntaxHighlighterを入手します。(自分はバージョン3.0.83を導入しました)ここからダウンロードできます→SyntaxHighlighterのダウンロード

§2 SyntaxHighlighterをアップロード

SyntaxHighlighterを入手したら、必要なファイルをFC2ブログ管理サイトへアップロードします。

この中で必要なファイルは・[styles]フォルダの[shCore.css]と[shCoreDefault.css] ・[scripts]フォルダ内のファイル全てです。 [scripts]フォルダ内のファイルは必要な言語用のものだけアップロードすれば良いのですが、とりあえず全部アップロードすることにします。 [FC2ブログ管理]→[ファイルアップロード]からアップロードします。ファイルのアップロードが完了したら、[ファイル一覧]の[ファイル情報]から、ファイルのアップロード先を確認しておいて下さい。(次の作業で必要になります)
アップロード先の例) http://blog-imgs-30.fc2.com/a/b/c/blog/〜

§3 ブログテンプレートの編集

SyntaxHighlighterのアップロードが完了したら、次はブログのテンプレートを編集します。 [FC2ブログ管理]→[テンプレートの設定]からテンプレートを編集します。ヘッダー部分(<head>縲鰀</head>)に以下を挿入します。(cssファイルを読み込ませます) [アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

<!-- ▼▼▼開始▼▼▼-->
<link type="text/css" rel="stylesheet" href="[アップロード先]/shCore.css" />
<link type="text/css" rel="stylesheet" href="[アップロード先]/shCoreDefault.css" />
<!-- ▲▲▲終了▲▲▲ -->

ボディ部分の最後(</body>の直前)に以下を挿入します。こちらも[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

<!-- ▼▼▼開始▼▼▼ -->
<script type="text/javascript" src="[アップロード先]/shCore.js"></script>
<script type="text/javascript" src="[アップロード先]/shAutoloader.js"></script>
<script type="text/javascript" src="[アップロード先]/shLegacy.js"></script>
<script type="text/javascript" src="[アップロード先]/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"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",
"vb vbnet               [アップロード先]/shBrushVb.js",
"xml xhtml xslt html    [アップロード先]/shBrushXml.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
<!-- ▲▲▲終了▲▲▲ -->

SyntaxHighlighter.autoloader

(

"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",

"vb vbnet [アップロード先]/shBrushVb.js",

"xml xhtml xslt html [アップロード先]/shBrushXml.js"

);

SyntaxHighlighter.config.bloggerMode=true;

SyntaxHighlighter.defaults['toolbar'] = false;

SyntaxHighlighter.all();

</script>

※bloggerMode=trueにすると自動改行機能=ONでも改行が正しく表示されます。

SyntaxHighlighter.config.bloggerMode=true;

1	SyntaxHighlighter.config.bloggerMode=true;

§4 SyntaxHighlighterの使い方

SyntaxHighlighterを使うにはソースコード部分を
<pre class=”brush:使用する言語;”>ソースコード</pre>
のように<pre>タグで囲んで記述します。
ただしソースコードはHTML特殊文字を変換する必要があります。
※HTML特殊文字
“→"
&→&
<→<
>→>
「ソースコード HTMLタグ変換」などで検索すると自動で変換してくれるツールやサイトが見つかるので、それを利用すると便利です。
「使用する言語」に指定するコードは以下のコード表から選んで指定します。

HTMLの場合は<pre class=”brush:html;”>ソースコード</pre>となります。
以上で、ブログ記事内のソースコードがキレイに表示されます。