2008年5月1日

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

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

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

試しにC言語のソースコードを表示してみました。
/* hello.c */
#include <stdio.h>

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

return 0;
}
※貼るときは<>の&lt;&gt;変換とタブの半角スペース変換を忘れないように。


■ 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>

 ブログの縦幅に制限はないのですが、あまり長すぎると読み難くなるので<pre class="prettyprint" style="height:200px;">のように適当な高さで切ってしまうのがお奨め。

【関連記事】

0 件のコメント:

コメントを投稿