FC2ブログでSyntaxHighlighterを使ってソースコードをキレイに表示する方法

13,2016 0 　 0

カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。
色々なブログを調べるとSyntaxHighlighterでは、エディタみたいに表示できるのでとてもキレイで見やすいようです。
さっそく導入方法を記します。

SyntaxHighlighterをダウンロードする

まずはSyntaxHighlighterを以下のサイトからダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/

サイトにアクセスすると、右側に「Download」の表示がありますので選びます。

次の画面では、本文上部にある「Click here to download」から最新のバージョンをダウンロードします。

FC2ブログへアップロード

次はダウンロードしたファイルを解凍し、FC2ブログへアップロードします。

アップロードするのは、
・[styles]フォルダの[shCore.css]と[shCoreDefault.css]
・[scripts]フォルダ内のファイル全て
です。

[scripts]フォルダ内のファイルは必要な言語用のものだけアップロードすれば良いらしいですが、どれが必要かわからないので全部アップロードしましたｗ

アップロードするときに、どこにアップロードしたかメモを取っておいてください。あとあとアップロード先のアドレスが必要になります。
（http://blog-imgs-30.fc2.com/a/b/c/blog/～みたいなアドレスです）

テンプレートを編集

SyntaxHighlighterのアップロードが完了したら、次はブログのテンプレートを編集します。

まずはヘッダー部分(<head>～</head>)に以下を挿入します。
※ [アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

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

実際に使ってみよう！

設定は完了です。いよいよ使ってみましょう！
<pre class="brush:使用する言語;">ソースコード</pre>のように、<pre>タグで囲んだ部分がエディタのように表示されます。

ただし、特殊文字は下記のように変換する必要があります。
"→"
&→&
<→<
>→>
「ソースコード HTMLタグ変換」などで検索すると自動で変換してくれるツールやサイトが見つかります。是非それらを利用しましょう。

「使用する言語」に指定するコードは以下のコード表から選んで指定します。
HTMLの場合は<pre class="brush:html;">ソースコード</pre>となります。