2011年8月29日月曜日

SyntaxHighlighterでソースコードを綺麗に見せよう

どうも。
いち、プログラマのyu1rowです。
ソースコードを載せることもあるブログとしては、綺麗に見せたいですよね。
というわけで、ソースコードを綺麗に整形してくれる"SyntaxHighlighter"を導入することにしました。
実際にBloggerに導入したので、手順をメモします。

どうすりゃいいの?


基本的には3ステップです。
  1. SyntaxHighlighterのダウンロード
  2. ファイルをどこかにアップロード
  3. blog内容を編集

Step.1 ダウンロード


↓以下のサイトからダウンロードしました。
SyntaxHighlighter ダウンロード先(2011/08/28現在)
ちなみに、このときのバージョンは3.0.83。

ダウンロードしたファイルを展開すると、いくつかファイルとフォルダが現れます。
以下の2つのフォルダと、中のファイルを使います。
./scriptsjsファイルが収められています
./stylescssファイルが収められています

Step.2 アップロード


ここに一番時間がかかったように思います。
というのも、Bloggerにはファイルをアップロードすることができず、別のスペースを借りることにしたのですが、Bloggerと同じくgoogleが運営する「サイト」を使ってみたところ、分かりづらくて使いづらくて...
まぁ他に使い慣れているスペースがあるならば、そちらを検討するのもテです。

以下の3つのファイルだけで最低限のことはできますので、お好みのスペースにアップしてください。
./scripts/shCore.js 基本のスクリプトファイルです。
./scripts/shBrushJava.js Javaのソースを整形します。
C#のソースを整形したければ"shBrushCSharp.js"を使います。
他に使用できる言語はここを参照してください。
./styles/shCoreDefault.css 基本のスタイルです。
他のスタイルも色々あるみたいですが、未検証です。

Step.3 blogを編集


最後にblogを編集します。
上記の3つのファイルを<script>タグと<link>タグで<head>タグの中に埋め込みます。
その後に、<script>タグでSyntaxHighlighter.all()という関数を動かすようにします。これで準備完了。

あとは、装飾したいコードを<pre>タグで囲みます。
<pre>タグの"class"属性には"brush: XXXX;"と書きます。
例えばJavaのコードなら、"XXXX"の部分は"java"と書きます。

以下に記述する例を載せておきます。
<html>
<head>
<title>コード装飾の例</title> 
<script type="text/javascript" src="http://yoursite.com/scripts/shCore.js"></script>
<script type="text/javascript" src="http://yoursite.com/scripts/shBrushJava.js"></script>
<link type="text/css" rel="stylesheet" href="http://yoursite.com/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head> 
 
<body>
<pre class="brush: java;">
public class Hoge {
/** デフォルトコンストラクタです。 */
public Hoge() { } 
}
</pre>
</body>
</html>
  • 4~7行目は順番が重要かもしれません
  • 他の言語を増やしたい場合、5行目の<script>タグを必要に応じて増やします。
    他に使用できる言語については、ここを参照してください。
  • Bloggerの場合は、「デザイン」⇒「HTML の編集」で<head>タグの中に埋め込むようにしました。
これでコードを美しく表示することができました。
他にもテーマだとか、コードを別ウインドウで表示する?機能だとか色々できるみたいです。
皆様それぞれに工夫してみてください。

0 件のコメント:

コメントを投稿