サイト移転のお知らせ

しばらくブログお休みしていましたが、こちらに移転しました。よろしければこちらへどうぞ。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighterでブログにソースコードを表示

ソースコードが貼付けられたブログを見ていると、行番号が表示されたり色づけされたりしてとても見やすいものがよくありますが、いったいどうやっているんだろう?
というわけで、調べてやってみました。SyntaxHighlighterというものの導入です。
幸いなことに、FC2ブログでの導入メモを公開されている方がいらっしゃるようなので参考にさせてもらいました。
FC2ブログでSyntaxHighlighter
興味のある方は続きをどうぞ。

1. SyntaxHighlighterをダウンロード・展開

まずはSyntaxhighlighterをダウンロードして展開。
http://code.google.com/p/syntaxhighlighter/downloads/list からSyntaxHighlighter_1.5.1.rarをダウンロード(2011.2.12時点では1.5.1というバージョンが最新かな?)
おっと、.rarファイルです。 MacOSXで展開するためにわざわざStuffIt入れたのに展開してみると、、、正しく展開できてない。
StuffItでunrar

MacPortsでunrarコマンドを入れられるみたいですが、今回は逃げでWindowsマシンで展開しました。
展開すること、こんな感じで3つのディレクトリと、その中に複数ファイルがあります。
SyntaxHighlighter_files

2. SyntaxHighlighterをFC2へアップロード

上記で展開したファイルの内「Scripts」の.jsファイルと「Styles」の.cssファイルをアップロードします。
javascriptは必要な言語についてのものだけあればよいようですが、ここでは全部アップロードしてしまいます。
アップロードは、FC2ブログ管理が画面の「ツール」→「ファイルアップロード」から。
計14個のファイルをアップロードしますが「ファイルアップロード」では一度に6ファイルしか選択できないようなので、面倒ですが3回に分けてアップロードしました。
以下は1回目のアップロードしたときの様子。
syntaxhighlighter_upload1.png

3. テンプレートの修正

アップロードしたcssファイルのURLをhrefの値に入れた以下の記述をテンプレートに追記。
<head></head>の間に記載します。

次に、scriptも追加。</body>の直前に入れました。もちろん、srcの値はアップロードしたファイルのURLをする必要があります。
以上で設定としては完了。

4. ソースコードの記述方法

以下のように、綺麗に表示したいソースコードを<textarea>の中に記述します。
classの値は記述する言語に合わせて指定する必要があります。具体的に指定できる値はこちらを参考に。
Supported languages

最後に、記事を保存するときの「記事の設定」→「改行の扱い」を「HTMLタグのみ」にしておきます。
こうしないと、ソースコードの行数の表示が正しく表示されないようです。
関連記事
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

サイト内検索
プロフィール

Author:imxs

Androidアプリ開発などを行っているimxsの開発者です。気になることを調べてメモって行きます。ほとんどの人にはどうでもいい内容でも、広い世の中一人くらいは同じ疑問を持った奇妙な人がいることを信じつつ。暖かい目で見守ってやってください。
imxsの開発者ブログは移転しました。よろしければこちらへどうぞ。

カテゴリ
最新記事
リンク
RSSリンクの表示
最新コメント
最新トラックバック
FC2カウンター
アクセスランキング
[ジャンルランキング]
携帯電話・PHS
193位
アクセスランキングを見る>>

[サブジャンルランキング]
Android(Google)
47位
アクセスランキングを見る>>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。