2010年12月16日

ソースコードの色分け・ハイライト表示

ソースコードを色分け表示したい、とずっと思っていたのですが、 無料で実現する方法がわからなかったので先延ばしにしていました。 最近google-code-prettifyを使えば無料(Livedoorが用意)で実現出来ることがわかったのでまとめておきます。

1.ブログ設定 

1)CSSの設定

ブログ設定/デザイン設定/デザインを開き、デザインカスタマイズにあるCSSタブを選択し、表示されるCSSコードの先頭に

@import url(http://parts.blog.livedoor.jp/css/prettify.css);

を挿入します。

lb_admin_css


2)個別記事ページの設定

デザインカスタマイズの隣にある個別記事ページタブを選択し、<$ArticleBodyMore$>の後に

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/prettify.js"></script>
<script>prettyPrint();</script>

を追加します。 
 
lb_admin_custom
 
これで設定は完了。

既存の記事にも反映させたい場合、再構築すれば反映できる。
(らしいです。自分は明確に再構築はしていないので) 


2.記事の作成

記事中でコードを記載する際に、該当部分を<pre class="prettyprint">〜</pre>で括ります。

すると、System.out.println('Hello World!');が

System.out.println('Hello World!');

となります!

少し寂しいのは行番号は表示出来ない点です。

<参考サイト> 
http://blog.livedoor.jp/dankogai/archives/50794929.html 
http://blog.livedoor.jp/eeu/archives/55051492.html 
http://kazz7.air-nifty.com/tekito/2007/04/codeprettify.html
Posted by netbuffalo at 11:14│TrackBack(0)その他 


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

http://trackback.blogsys.jp/livedoor/netbuffalo/1908903