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


1282931_52617444


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

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

§1 SyntaxHighlighterの入手

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

§2 SyntaxHighlighterをアップロード

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

スクリーンショット2

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

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

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

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

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

§4 SyntaxHighlighterの使い方

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

シェアして頂けると嬉しいです

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









■コメントはお気軽にどうぞ