Code Prettifyを使ってブログにソースコードを投稿 : ubichupas.net

　他所のブログで綺麗に色分けされたソースコードを見かけて、自分のブログにも導入しようとHTMLソースを覗き見たりしてたのですが、Bloggerに簡単導入できるようウィジェットにした奴がクリボウさんのところで公開されてました。

【クリボウ】コードをハイライトする「Code Prettify」ウィジェット

　スタイルシートとjavascriptの追加が目的の表示されないウィジェットなので、タイトルは空のままレイアウト画面でフッターあたりに放り込んでおけばOK。
あとは投稿時にソースコードを<pre class="prettyprint">タグで囲めば色分けされたソースコードが表示されます。∩( ・ω・)∩ ﾊﾞﾝｼﾞｬｰｲ

試しにC言語のソースコードを表示してみました。

/* hello.c */
#include <stdio.h>

int main(int argc, char *argv[])
{
printf("Hello World!\n");

return 0;
}

※貼るときは＜＞の＆ｌｔ；＆ｇｔ；変換とタブの半角スペース変換を忘れないように。

■ Code Prettifyウィジェットの改良

　非常に便利なウィジェットでしたが一点、このまま使うには問題がありました。　それはソースコードがブログの横幅をはみ出してしまうこと。　ちょっとしたプログラムとかHTMLソースでも「1行80文字」みたいな鬼ルールを守らない限り、余裕ではみ出してしまいますね。

　そこで横幅がはみ出す場合に横スクロールバーを表示するようにウィジェットを改良しました。ブログのテンプレートに合わせて「width: 490px;」を調節してください。（IE6でレイアウトが崩れないなら未指定でよいかも。）

これで安心して糞長いソースコードを貼り付けられます。
ついでに背景色も自分好みで黄色っぽくしておきました。

改良したウィジェットのコード

<!-- Code Prettify -->
<style type="text/css">
@import "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css";
</style>
<style type="text/css">
<!--
PRE.prettyprint
{
 width: 490px;
 overflow: auto;
 background-color: #fffff0;
}
-->
</style>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
function prettify() {
prettyPrint();
}
if (window.addEventListener) {
window.addEventListener("load", prettify, false);
} else if (window.attachEvent) {
window.attachEvent("onload", prettify);
} else {
window.onload = prettify;
}</script>