2012年9月2日日曜日

Objective-CのSyntaxHighlighterをBloggerで利用できるようにする

このエントリーをはてなブックマークに追加
SyntaxHighlighterはソースコードを色分けして綺麗に表示するJavaScriptのライブラリです。しかし、Objective-Cは本家のライブラリに含まれていないため、その言語を利用したい場合はそれ専用のファイルを別のサイトから持ってくる必要があります。いろいろと試して何とかObjective-CのSyntaxHighlighterをBloggerで利用できるようになったので、その導入手順をメモします。


導入手順は次の通りです。

1. SyntaxHighlighterをソースコードの色付け - SyntaxHighlighter - <設定編>の方法で設定します。
2. UNDER MY HATのSYNTAX HL BRUSHESから"Oxygen"にあるファイル(shBrushObjectiveC.js)を開いてコピーします。("Objective-C"にあるjsファイルは別もののようです)
3. 1.で設定したタグ<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">と<script language="javascript">の間に<script></script>を記述します。
4. 3で記述した<script></script>の間に2でコピーした内容を貼り付けます。
5. 後はObjective-Cのコードを <pre class="brush: objc"></pre>で囲むと色付けされるようになります。


実行サンプルは次の通り。(色付けが少し寂しい気がしますが。。)

この導入方法は簡単で良いのですが、本家ライブラリとshBrushObjectiveC.jsを自サイトにアップロードして利用するのが本来のやり方だと思います。しかし、Bloggerではjsファイルをアップロードして利用するということが難しそうだったのでこの方法を採りました。自サイトへのアップロードはまた別の機会に。


SyntaxHighlighterの本家URL:SyntaxHighlighter
Objective-CのSyntaxHighlighter:UNDER MY HAT
導入まとめ1:ソースコードの色付け - SyntaxHighlighter - <概要編>
導入まとめ2:ソースコードの色付け - SyntaxHighlighter - <使用編>
導入まとめ3:ソースコードの色付け - SyntaxHighlighter - <設定編>
導入参考サイト1:はてなブログでSyntaxHighlighterでObjective-Cを表示
導入参考サイト2:SyntaxHighlighterでObjective-Cをきれいに表示

0 件のコメント:

コメントを投稿