2010年09月25日

[雑多]seesaaブログでコードをキレイに表示する方法

 このSeesaaブログ…普通に書くとコードのインデントとかがキレイに出ないのです。
 で、どうやっているのかなぁと調べてみると、その方法があったので書いてみます。

***********************
◆使うツール
SyntaxHighlighter
サイトはこちらです。

◆どういうもの?
 基本的なjs、cssと言語毎のjsがあり、それをブログに読み込まれせることでコードにハイライトを付けます。
 具体的な見え方は「[仕事]辞書変換に「google-api-translate-java」を使ってみました。」を。

◆手順
1:SyntaxHighlighterをダウンロードします。
 2010/09/25現在の最新版は3.0.83でした。

2:seesaaブログ側にアップロード先のディレクトリを作成する。
 ファイルをアップロードするディレクトリを作ります。ディレクトリ名は任意でOKです。

3:必要なファイルをアップロードします。
 上記ディレクトリに(Seesaaブログの管理画面…「記事投稿」-「ファイルマネージャ」…で)アップロードしていきます。
 アップロード先は先程作ったディレクトリです。
※私は、別のディレクトリにアップロードしているのに気づかず、しばしはまっていました。

 アップロードする最低限のファイルは以下です。
・styles/shCore.css
・styles/shThemeDefault.css
・src/shCore.js
・scripts/shBrushXxx.js
 Xxxは記述したい言語に合わせて行ってください。
 対応する言語はこちらで確認してください。

4:ブログのデザインにファイルを読み込ませます。
 Seesaaブログの管理画面の「デザイン」-「HTML」でデフォルトHTMLをコピーするなりして、そこにアップロードしたファイルを読み込ませる記述をします。
※hogehoge.up.seesaa.net/syntax/の部分はそれぞれの環境によって異なります。








5:コードとして表示したい所を指定する。
 preタグのclass="brush:java;"というように指定します。
public static void main(String[] args) {
    System.out.println("hogehoge");
}
※"brush:java;"の部分は読み込ませた言語のjsに合わせてください。

 後、アップする際のオプションを「改行HTMLタグ変換」を「改行を
タグに変換しない」にして、コード以外の部分には改行タグタグを明示的に入れてください。

***********************

 アップロードなどが少し手間ですが、ブログでの見え方もキレイかと思います。


タグ:備忘録
posted by yohhatu at 07:50 | Comment(0) | TrackBack(0) | 雑多 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック