Smart Gadget Laboratory: SyntaxHighlighter

ラベル SyntaxHighlighter の投稿を表示しています。すべての投稿を表示

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をきれいに表示

2010年12月12日日曜日

ソースコードの色付け - SyntaxHighlighter - <設定編>

ラベル: SyntaxHighlighter, yasu_kei

今回は、SyntaxHighlighterの設定編です。

結論から言うと、最も簡単な設定方法は、以下のコードを</head>タグの前に貼り付けるだけです。

2010年12月6日月曜日

ソースコードの色付け - SyntaxHighlighter - <使用編>

ラベル: SyntaxHighlighter, yasu_kei

今回は、前回紹介したSyntaxHighlighterの使用編です。
（設定は次回）

2010年12月2日木曜日

ソースコードの色付け - SyntaxHighlighter - <概要編>

ラベル: Blogger, SyntaxHighlighter, yasu_kei

Webサイトやブログ上で、プログラムのソースコードを見やすく色付けしたい。
そんなときに使えるのが、SyntaxHighlighterです。

以下、その見本です。

#include <stdio.h>

int main(void) {
    printf("Hello world\n");
    return 0;
}

SyntaxHighlighterは、現時点で、Apache、Mozilla、Yahooなどその他、多くのサイトで利用されています。

このSyntaxHighlighterはjavascriptを利用しているため、Webサーバやブログなどに対して特別な要件を必要としません。一般的なWebサーバやブログであれば、基本的に誰でも使用することができます。使用に際しての最低ラインは、htmlページの<head></head>タグ内に、SyntaxHighlighterのコードを挿入できることです。また、Bloggerのユーザは少なくとも使用できます。

次回、このSyntaxHighlighterの設定と使用方法について書きたいと思います。

SyntaxHighlighter本家（現時点のバージョンは、3.0.83）
http://alexgorbatchev.com/SyntaxHighlighter/

Smart Gadget Laboratory