最近のトラックバック

« V8 JavaScript Engine を VS2010 でビルド(GYP版) | メイン | サイトデザイン調整 »

2012年3月25日 (日)

eoblogでのgoogle-code-prettifyの利用

20120227_google
Image by http://icondock.com/
eoblogでgoogle-code-prettifyを利用する方法についてのメモです。
eoblogではbodyタグを改変する事が出来無い事に対する解消法と、
細々とした注意事項を纏めています。

google-code-prettifyを使用する為の原理は簡単で、下記の様な4つの条件が成立すれば機能します。
1. prettify.css を読み込み、スタイルシートに認識させる
2. prettify.js を読み込み、JavaScriptに認識させる
3. 色分けコードを、prettyprintクラスを付加したpre・codeタグで囲む
4. 色分けコードが全て読み込み終わった後にJavaScriptで"prettyPrint();"を実行する

まずは必要なファイルを用意します。
google-code-prettifyの公式からダウンロードしてきます。
公式サイトには
“prettify”系と“prettify-small”系の2つがありますが、スタイルシートを改変しないならsmallの方だけで良いです。
スタイルシートを改変するなら非smallも落としてきた方が良いかもしれません。
smallの方は改行やスペースが省略されているので非small側のファイルを見つつ改変した方が楽です。

20120325a_eoblog
“prettify.css”と“prettify.js”をeoblogにアップロードします。
eoblogにログインし、コントロールパネル→ファイルからアップロードします。
フォルダ階層は何処でも良いです。
今回は“ホーム/”の所にアップロードした事にして進めます。

アップロードが終わったらそれそれを認識させます。
少し前迄はeoblog上で任意のJavaScriptを書くのは意外と手間が掛かる作業だったのですが、
今は改善されていて大分楽です。
カスタムHTMLという機能を使ってスタイルシートとJavaScriptを追加します。

20120325b_eoblog
まずブログ→デザインと選択します。

20120325c_eoblog
次にデザインページの中程に有る“表示項目の選択”を選択します。

20120325d_eoblog
表示項目の選択ページに在るサイドバー項目のカスタムHTMLを見つけ、
“モジュールの追加”を選択します。

20120325e_eoblog
カスタムHTMLモジュールの作成ページが表示されます。
それぞれ下記の様に設定します。
名前
Google Code Prettify
HTML
<style type="text/css">
@import url(/prettify.css);
</style>
<script src="/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
try{
window.addEventListener("load", prettyPrint, false);
} catch(e) {
window.attachEvent("onload", prettyPrint);
}
</script>

設定出来たら保存ボタンを選択して戻ります。

なお“/prettify.css”と“/prettify.js”の所のパスはさっきアップロードした場所に合わせて下さい。
“ホーム/”にアップロードしたのなら上記のままで良いです。

それとパスについて1つ注意点があります。
eoblogでは記事のパスが結構変動する為、安定しません。
例えば下記の様にディレクトリ位置も含めてかなり揺れます。
http://eral.blog.eonet.jp/
http://eral.blog.eonet.jp/default/
http://eral.blog.eonet.jp/default/2012/03/v8-javascript-e-307f.html
どのパス上でも的確に“/prettify.css”と“/prettify.js”アクセス出来ないと正常に機能しません。
依って実質的に相対パスは使用出来ず、絶対パスかルートパスかに為ります。
記事に依って動いたり動かなかったりした場合は、パスが正しいか確認してみて下さい。

20120325f_eoblog
カスタムHTMLの所に“Google Code Prettify”が追加されます。
チェックボックスが付いているのを確認出来たら、
変更を保存して戻ります。

20120325g_eoblog
そして“ブログを再構築”を選択します。
記事数にも依りますが再構築は結構時間が掛かります。
のんびり待ちましょう。

さて、此処迄の対応でgoogle-code-prettifyを使用する為に必要な4つの条件の内3つが終わりました。
具体的には下記の3つが終わりました。
1. prettify.css を読み込み、スタイルシートに認識させる
2. prettify.js を読み込み、JavaScriptに認識させる
4. 色分けコードが全て読み込み終わった後にJavaScriptで"prettyPrint();"を実行する

最後の条件は下記です。
3. 色分けコードを、prettyprintクラスを付加したpre・codeタグで囲む
これは記事単位、ソース単位に個別に設定していく必要があります。

20120325h_eoblog
まず普通に記事を書きます。
このままではgoogle-code-prettifyは機能しません。

20120325i_eoblog
google-code-prettifyを機能させたい箇所に目処を付けます。

20120325j_eoblog
HTMLの編集を選択します。

20120325k_eoblog
先程見当を付けた“google-code-prettifyを機能させたい箇所”を探し出します。

20120325l_eoblog
“google-code-prettifyを機能させたい箇所”の前後に
<code class="prettyprint">~</code>
か、
<pre class="prettyprint">~</pre>
のどちらかを付加します。
今回はcodeタグの方を付加しました。

これで準備ができました。
公開すればgoogle-code-prettifyが機能して色分けされるはずです。

20120325m_eoblog
ちなみに記事作成途中で“確認”が出来ますが、
この確認中では機能しません。
google-code-prettifyの動作に必要な機能をサイドバーに埋め込んでいるので、
サイドバーが表示されない確認中は動作しません。

20120325n_eoblog
公開しながら調整していくしか無いです。

トラックバック

このページのトラックバックURL:
http://app.blog.eonet.jp/t/trackback/351525/28153007

eoblogでのgoogle-code-prettifyの利用を参照しているブログ:

コメント

コメントを投稿