いち、プログラマのyu1rowです。
ソースコードを載せることもあるブログとしては、綺麗に見せたいですよね。
というわけで、ソースコードを綺麗に整形してくれる"SyntaxHighlighter"を導入することにしました。
実際にBloggerに導入したので、手順をメモします。
どうすりゃいいの?
基本的には3ステップです。
- SyntaxHighlighterのダウンロード
- ファイルをどこかにアップロード
- blog内容を編集
Step.1 ダウンロード
↓以下のサイトからダウンロードしました。
SyntaxHighlighter ダウンロード先(2011/08/28現在)
ちなみに、このときのバージョンは3.0.83。
ダウンロードしたファイルを展開すると、いくつかファイルとフォルダが現れます。
以下の2つのフォルダと、中のファイルを使います。
./scripts | jsファイルが収められています |
---|---|
./styles | cssファイルが収められています |
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 件のコメント:
コメントを投稿