2009年7月31日金曜日

都道府県のDBマスターテーブルとHTMLセレクト要素の雛型

こういう雛型(都道府県選択するやつ。)って、あらかじめ作っておくと便利なことありますよね。

都道府県の場合はDBにマスターテーブル作って管理することが多いと思うので、DB用の雛型も作ってみました。

MySQL用のCREATE文とINSERT文の雛型


CREATE TABLE `prefectures` (
`id` int(2) NOT NULL,
`name` varchar(15) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `prefectures` VALUES
(1, '北海道'),
(2, '青森県'),
(3, '秋田県'),
(4, '岩手県'),
(5, '山形県'),
(6, '宮城県'),
(7, '福島県'),
(8, '山梨県'),
(9, '長野県'),
(10, '新潟県'),
(11, '富山県'),
(12, '石川県'),
(13, '福井県'),
(14, '茨城県'),
(15, '栃木県'),
(16, '群馬県'),
(17, '埼玉県'),
(18, '千葉県'),
(19, '東京都'),
(20, '神奈川県'),
(21, '愛知県'),
(22, '静岡県'),
(23, '岐阜県'),
(24, '三重県'),
(25, '大阪府'),
(26, '兵庫県'),
(27, '京都府'),
(28, '滋賀県'),
(29, '奈良県'),
(30, '和歌山県'),
(31, '岡山県'),
(32, '広島県'),
(33, '鳥取県'),
(34, '島根県'),
(35, '山口県'),
(36, '徳島県'),
(37, '香川県'),
(38, '愛媛県'),
(39, '高知県'),
(40, '福岡県'),
(41, '佐賀県'),
(42, '長崎県'),
(43, '熊本県'),
(44, '大分県'),
(45, '宮崎県'),
(46, '鹿児島県'),
(47, '沖縄県');


select要素の雛型
<select name="都道府県">  
<option value="">-- 都道府県を選択 --</option>
<optgroup label="北海道・東北">
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">秋田県</option>
<option value="4">岩手県</option>
<option value="5">山形県</option>
<option value="6">宮城県</option>
<option value="7">福島県</option>
</optgroup>
<optgroup label="甲信越・北陸">
<option value="8">山梨県</option>
<option value="9">長野県</option>
<option value="10">新潟県</option>
<option value="11">富山県</option>
<option value="12">石川県</option>
<option value="13">福井県</option>
</optgroup>
<optgroup label="関東">
<option value="14">茨城県</option>
<option value="15">栃木県</option>
<option value="16">群馬県</option>
<option value="17">埼玉県</option>
<option value="18">千葉県</option>
<option value="19">東京都</option>
<option value="20">神奈川県</option>
</optgroup>
<optgroup label="東海">
<option value="21">愛知県</option>
<option value="22">静岡県</option>
<option value="23">岐阜県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="25">大阪府</option>
<option value="26">兵庫県</option>
<option value="27">京都府</option>
<option value="28">滋賀県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="31">岡山県</option>
<option value="32">広島県</option>
<option value="33">鳥取県</option>
<option value="34">島根県</option>
<option value="35">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</optgroup>
</select>

2009年7月19日日曜日

bit.lyでURLを短縮してTwiiterに投稿するPythonコード

ブログとTwitterの棲み分けは色々議論があると思いますが、個人的にはまとまった記事にならないような一言メモなんかはTwitterにポストするようにしています。

はてなブックマークがWeb Hookをリリースしてから色々妄想したところ、ありがちですがはてブとTwitterを連動させたら面白そうだなと思いました。
下手したらうざいリンクスパムになるかもしれませんが。。。


最近はHookHubなるサービスが登場したのでわざわざ自分で作る必要ないかもしれませんが、とりあえず勉強のために自作することに。

TwitterのAPIはURLを短縮してくれないようなので、あわせてbit.lyのAPIも叩きます。

bit.lyのAPIは認証式なので、アカウントを作成してAPI Keyをゲットする必要があるのでご注意を。


両APIのドキュメントはこちら

Twitter API Wiki
bit.ly API Documentation

import urllib, urllib2, logging
import xml.dom.minidom

class Twitter:

def __init__(self, login, password, bitly_login=None, bitly_apikey=None):
self.uri = 'http://twitter.com'
self.end_point = ''
self.login = login
self.password = password
self.bitly_login = bitly_login
self.bitly_apikey = bitly_apikey

def bitly_account(self, bitly_login=None, bitly_apikey=None):
self.bitly_login = bitly_login
self.bitly_apikey = bitly_apikey

def post(self, body='', url='', limit=20):
self.end_point = '/statuses/update.xml'

# bit.ly
if len(url) > limit and self.bitly_login and self.bitly_apikey:
bit = Bitly(self.bitly_login, self.bitly_apikey)
try: url = bit.shorten(url).get()
except BitlyError: pass

message = '%s %s' % (body, url)
options = {'status': message.encode('utf_8')}
return self.send_request(options, auth=True)

def destroy(self, status_id):
self.end_point = '/statuses/destroy/%s.xml' % status_id
return self.send_request({}, auth=True)


def send_request(self, options, auth=False):
if auth: self.auth()

try:
request = urllib2.Request(self.uri + self.end_point, urllib.urlencode(options))
response = urllib2.urlopen(request)

if response.code != 200:
e = 'Twitter response: code > %d, message > %s' % (response.code, response.msg)
logging.error(e)
raise TwitterRequestError, e

return TwitterResponse(response.read())
finally:
response.close()

def auth(self):
#Basic Auth
auth_handler = urllib2.HTTPBasicAuthHandler()
auth_handler.add_password('Twitter API', self.uri, self.login, self.password)

opener = urllib2.build_opener(auth_handler)
urllib2.install_opener(opener)

class TwitterResponse():

def __init__(self, content):
self.content = content
self._node = xml.dom.minidom.parseString(content)

def get(self, name='id'):
return self._get_data(name)

def _get_data(self, nodename, node = None):
if node is None : node = self._node
elm = node.getElementsByTagName(nodename)
return elm[0].firstChild.data.rstrip().lstrip() if elm else ''

class TwitterError(Exception):
"""Used to indicate that an error occurred when trying to access Twitter via its API."""

class TwitterRequestError(TwitterError):
"""Used to indicate that an error occurred when trying to access Twitter via its API."""

class TwitterResponseError(TwitterError):
"""Used to indicate that an error occurred when trying to access Twitter via its API."""



class Bitly:

def __init__(self, login, api_key):
self.uri = 'http://api.bit.ly'
self.end_point = ''
self.version = '2.0.1'
self.login = login
self.api_key = api_key

def shorten(self, url):
self.end_point = '/shorten'
options = {'longUrl': url, 'format': 'xml'}
return self.send_request(options)

def send_request(self, options={}):
options['login'] = self.login
options['apiKey'] = self.api_key
options['version'] = self.version

if not options.has_key('history'):
# history=1というパラメータがないとbit.lyのHistoryで見ることができない
options['history'] = '1'

apiurl = self.uri + self.end_point + '?' + urllib.urlencode(options)

response = urllib2.urlopen(apiurl)

try:
if (response.code != 200):
e = 'bit.ly response: code >> %d, message > %s' % (response.code, response.msg)
logging.error(e)
raise BitlyRequestError, e

return BitlyResponse(response.read())
finally:
response.close()

class BitlyResponse():

def __init__(self, content):
self.content = content
self._node = xml.dom.minidom.parseString(content)
self.status = self._get_data('statusCode')

def get(self):
if self.has_error(): raise BitlyResponseError, self.get_error()
return self._get_data('shortUrl')

def has_error(self):
return self.status == 'ERROR'

def get_error(self):
return self._get_data('errorMessage')

def _get_data(self, nodename, node = None):
if node is None : node = self._node
elm = node.getElementsByTagName(nodename)
return elm[0].firstChild.data.rstrip().lstrip() if elm else ''

class BitlyError(Exception):
"""Used to indicate that an error occurred when trying to access bit.ly via its API."""

class BitlyRequestError(BitlyError):
"""Used to indicate that an error occurred when trying to access bit.ly via its API."""

class BitlyResponseError(BitlyError):
"""Used to indicate that an error occurred when trying to access bit.ly via its API."""



使い方はこんな感じです。


twit = Twitter('Your Twitter Login', 'Your Twitter Password')
twit.bitly_account('Your bit.ly Login', 'Your bit.ly API Key')
twit_res = twit.post(body='コメント', url='http://www.example.com')
# body と url にはてブから投げられたコメントとURLを指定すれば、はてブとTwitterを連動できます

[jQuery Simple Dialog] デモサイト & バージョンアップしました (0.1)


jQueryのプラグインなのにデモサイトがないのはありえないよね、ってことでデモサイトを用意しました。

jQuery Simple Dialog デモ
http://www.mudaimemo.com/p/simpledialog/


さらにいくつかアップデートしたので報告します。

  • オプションを多数追加しました。
  • アニメーションエフェクトを追加しました。
  • ダイアログを閉じるためのメソッドを追加しました。
  • CSSファイルを更新しました。


使い方などは下記のプロジェクトページをご覧下さい。

jquery-simpledialog - Google Code
http://code.google.com/p/jquery-simpledialog/

2009年7月12日日曜日

jQueryのパフォーマンスにおいて厳守すべき11の掟

勝手に意訳。
ほんとうにざっくりとした意訳ですので、詳細は下記のリンクをどうぞ。

jQuery Performance Rules
http://www.artzstudio.com/2009/04/jquery-performance-rules/


1. 常に#idを指定する Always Descend From an #id


Javascriptのネイティヴなメソッド getElementById()を利用するので速い。


2. クラスの前にタグを指定する Use Tags Before Classes


タグのセレクタは#idの次に速い。
どうしても#idをしてできない場合はタグを指定すべし。( $('head') )
なぜならJavascriptのネイティヴなメソッド getElementsByTagName() を利用するから。

<div id="content">
<form method="post" action="/">
<input type="radio" class="on" name="light" value="red" />
<input type="radio" class="on" name="light" value="blue" />
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

var radio = $('#content input.on');

IDにタグ名を指定してはいけない。
// var content = $('div#content');

'content' IDをみつけるためにすべての<div>タグをループで回して捜査することになる。


3. jQueryオブジェクトをキャッシュする Cache jQuery Objects


こんなことをしてはいけない。
$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

こうすべき。
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');



4. チェイニングのパワーを活用する Harness the Power of Chaining


前項は次のようにも書ける。
こちらのほうがタイプ量が少なくてすむ。
var $active_light = $('#traffic_light input.on');
$active_light
.bind('click', function(){...})
.css('border', '3px dashed yellow')
.css('background-color', 'orange')
.fadeIn('slow');


5. サブクエリを使うUse Sub-queries


<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>

var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');

最初に親ノードをキャッシュしてから子ノードを操作する。


6. DOMを直接操作しない Limit Direct DOM Manipulation


DOMを直接操作するのは速度的に賢明ではない。

悪い例
var top_100_list = [...], // 100個のユニークな文字列が入ってると仮定
$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++) {
$mylist.append('<li>' + top_100_list[i] + '</li>');
}

こう書くべき
var top_100_list = [...], // 100個のユニークな文字列が入ってると仮定
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list

for (var i=0, l=top_100_list.length; i<l; i++) {
top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>';

$mylist.replaceWith(top_100_ul);

7. Leverage Event Delegation Leverage Event Delegation (a.k.a. Bubbling)


イベントリスナー関数をたくさんのノードに登録するより、親ノードに一度だけ登録すべき。

悪い例
$('#entryform input').bind('focus', function(){
$(this).addClass('selected');
}).bind('blur', function(){
$(this).removeClass('selected');
});

こうすべき。
$('#entryform').bind('focus', function(e){
var cell = $(e.target); // e.target はイベントが実行されたノードを指す
cell.addClass('selected');
}).bind('blur', function(e){
var cell = $(e.target);
cell.removeClass('selected');
});


8. クエリの無駄を排除する Eliminate Query Waste




9. $(window).loadに処理を移譲する Defer to $(window).load


なんでもかんでも $(document).ready で行うのは考えもの。

10. JSファイルを圧縮するCompress Your JS


YUI Compressor とか Packer とか


11. ライブラリを学ぶ Learn the Library


チートシートを活用してjQueryに何ができるのか学ぶ。

関連リンク:
使えるjQueryのtipsとトリック20選

[jQuery Tooltip Plugin] ツールチップを活用してページをすっきり見せる

ひとつのページに情報を詰め込みたい。
だけど全部表示するとうるさく感じられる。
ツールチップを活用するとそういうジレンマを多少解消できるかも。

jQuery Tooltip Plugin
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
デモ

ツールチップを実装するにあたっては、こちらのプラグインがデモも充実していて使いやすいと思いました。

ここでは自分が適用した方法を紹介したいと思います。

準備としてはじめに必要なファイルをインクルードします。

<link rel="stylesheet" type="text/css" href="jquery.tooltip" />
<script type="text/javascript" src="/javascripts/jquery.tooltip.js"></script>


1. リンクの上にカーソルを置いたときに文字情報を表示する。

newsy
http://newsy.appspot.com/

newsyはテクノロジー系のブログフィードを読み込んでカテゴリー自動分類をするニュースアグリゲーターです。
1ページに多くの記事を並べたかったので、記事の要約まで表示してしまうとごちゃごちゃした印象を与えてしまうと判断し、記事の要約はツールチップで見せることにしました。

HTML
<a href="http://example.com" title="見出し - ここにツールチップに表示する内容を書きます" class="entry" >ツールチップデモ

Javascript
$(document).ready(function(){
$('a.entry').tooltip({
track: true,
delay: 0,
showURL: false,
opacity: 1,
fixPNG: true,
showBody: " - ",
extraClass: 'pretty',
top: -15,
left: 5
});
});

ツールチップで表示したい内容をaタグのtitle属性に書きます。
jQuery Tooltip Pluginのオプションで showBody: " - " と指定しているので、titile属性に書いた文字を " - " で分割します。
前半部分がツールチップの見出し、後半部分がツールチップの内容になります。

jQuery Tooltip Pluginはデフォルトのデザインの他にもデザインが用意されています(funcyとpretty)。
newsyではprettyデザインを採用することにしました。(extraClassで指定)

別デザインに必要なスタイルシートと画像は、ダウンロードしたフォルダ内にあるdemoの中にあります。

screen.css の該当箇所 (#tooltip.prettyなど) をコピーして既存のCSSファイルに貼付けます。

画像 (prettyの場合はshadow.png) もコピーしてしかるべき場所に配置します。
(デフォルトではCSSファイルと同じ階層。別フォルダにする場合はCSSを書き換える)



2. リンクの上にカーソルを置いたときに画像を表示する。

ComiQ
http://comiq.appspot.com/

ComiQはAmazonのProduct Advertising API を利用して漫画の発売日をまとめたサイトです。

1ページに数十冊のコミックを並べると、すべてのコミックに画像を付けた場合どうしても読み込みに時間がかかってしまいます。
そういうわけで思い切って画像を非表示にし、ツールチップで見せることにしました。

HTML
<a href="http://example.com" rel="/images/large-image.jpg" class="book" >ツールチップデモ</a>

Javascript
$(document).ready(function(){
$('a.book').tooltip({
track: true,
delay: 0,
showURL: false,
opacity: 0.3,
fixPNG: true,
top: -15,
left: 5,
bodyHandler: function() {
return $('<img/>').attr('src', $(this).attr('rel'));
}
});
});

aタグのrel属性にツールチップで表示したい画像のURLを書きます。

tooltipのbodyHandlerオプションにツールチップ表示時に実行するコールバック関数を指定します。
ここでは、rel属性に書かれた画像のURLをもとに、動的に画像要素を作成しています。

このコールバック関数の書き方次第で画像以外にも様々な要素を表示することが可能になっています。

2009年7月9日木曜日

Google App Engine上のアプリでOpen IDを利用する

英語版主体で運営しているLibroSpotに、どこの国の方か分かりませんが「OpenIDに対応してくれ!」という要望があったので、ひと肌脱ぐことにしました。

LibroSpotはGoogle App Enigne上でDjango用のヘルパー(google-app-engine-django)を利用して動いています。

OpenIDの認証を自前で実装するとなるとコトですが、
google-app-engine-django向けのOpenIDライブラリがあるので、これ幸いと活用させていただくことにしました。

google-app-engine-django-openid
http://code.google.com/p/google-app-engine-django-openid/


結論から言うと、正直OpenIDの実装方法なんて全然知りませんでしたが、小1時間で対応完了!

ただし、若干の不具合(!?)らしきものがあったのでご報告を。


1. ログイン後のリダイレクト先があやしい

サイトの作りにもよりますが、ログインしたらそれまで開いていたページに戻って来て欲しいもの。

google-app-engine-django-openid(gaedo)も当然そのような処理をくわえています、が。。。正しく動いていないような!?

openidgae/templates/openidgae-login.html

<form action="{% url openidgae.views.OpenIDStartSubmit %}?continue={{continueUrl}}" method="post">
<input type="text" name="openid_identifier" id="openid_identifier" />
<input type="submit" value="Verify" /<
</form>

openidgae.views
def get_continue_url(request, default_success_url):
continueUrl = request.GET.get('continue', default_success_url)

formのactionにcontinueというパラメーターを付けていますが、これがrequest.GETの中に入ってきません。
postでサブミットしているからでしょうか?
また、continueUrlという変数にも何も入っていないので、そのままでは元のページに戻ることはありません。


それをふまえて書き換えたのがこちら。

openidgae/templates/openidgae-login.html
<form action="{% url openidgae.views.OpenIDStartSubmit %}" method="post">
<input type="text" name="openid_identifier" class="standard" style="width:140px;" id="openid_identifier" />
<input type="submit" class="standard" value="{% trans 'Verify' %}" />
<input type="hidden" name="continue" value="{{ request.get_full_path }}" />
</form>

openidgae.views
def get_continue_url(request, default_success_url):
if request.method == 'POST':
continueUrl = request.POST.get('continue', default_success_url)
else:
continueUrl = request.GET.get('continue', default_success_url)

continueパラメーターは無難でhiddenで渡すように変更し、遷移元のパスを明示的に指定しました。

ちなみに、テンプレートでrequestオブジェクトを使うには

setting.py
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.request',
)



2. GAE付属のGoogle Accounts Python APIとの併用

認証まわりはgaedo1本でいくとしてもGoogle Accounts Python APIと併用するにしても、問題が出てきます。

gaedoはDjangoの認証まわりの各種メソッドに対応していないので、例えば、viewで request.user.is_authenticated を実行しても常にFalseが返ってきます。

また、すでにGoogle Accounts Python APIを導入済みの場合は、ユーザー情報の管理がUserモデルとPersonモデルに分割され、しかも情報が共通ではありません。

LibroSpotの場合はすでにGoogle Accounts Python APIを利用して認証を行っていたので、こちらをベースになんとかできないものかと模索したところ、これでいいのかな?という形に一応まとまりました。

いじるのは appengine_django.auth.middleware ひとつだけです。

オリジナル
class LazyUser(object):
def __get__(self, request, obj_type=None):
if not hasattr(request, '_cached_user'):
user = users.get_current_user()
if user:
request._cached_user = User.get_djangouser_for_user(user)
else:
request._cached_user = AnonymousUser()
return request._cached_user


変更後
class LazyUser(object):
def __get__(self, request, obj_type=None, person=None):
if not hasattr(request, '_cached_user'):
user = users.get_current_user()
if user:
request._cached_user = User.get_djangouser_for_user(user)
else:
from django.http import HttpResponse
import openidgae
person = openidgae.get_current_person(request, HttpResponse())
if person:
request.__class__.openid_person = person
request._cached_user = self.get_djangouser_for_openiduser(person)
else:
request._cached_user = AnonymousUser()
return request._cached_user

def get_djangouser_for_openiduser(self, person):
if hasattr(person, 'user_ref') and person.user_ref:
django_user = User.get(person.user_ref)
else:
email = person.get_email()
name = person.person_name()
u = email if email else name
django_user = User(user=users.User(u), email=email, username=name)
django_user.save()
person.user_ref = django_user.key()
person.save()
return django_user


このMiddlewareはgoogle-app-engine-djangoの認証まわりのコアとなるクラスで、認証およびデータの格納を一元的に管理しているようです。

Personモデル(openidgae.models.Person)はdb.Expandoを継承しているので、後から要素を追加することが可能です。

OpenIDでログインしている場合は、新しくUserモデル(appengine_django.auth.models.User)のオブジェクトを作成し、そのKeyをPersonモデルに格納して両者をひもづけることにしました。

さらにUserオブジェクトをrequestオブジェクトにセットすることで、前述の request.user.is_authenticated などが使えるようになります。


と、まあ、上記のように自分なりにいろいろいじった部分がありますが、おおむねではもの凄く簡単にOpenID対応が可能になります。
少なくともOpenIDの認証方法には一切タッチすることなく!

2009年7月7日火曜日

[Simple Dialog] 超簡単にモーダルダイアログを操作できるjQueryのプラグイン

LightboxfaceboxjQuery-UI Dialogなどなど、世にダイアログ/ウィンドウ系のJavascriptライブラリは数あれど、そんなにオシャレじゃなくてもいいしリッチじゃなくてもいいから、サクっと使えるのないかな〜と思いつつ、勉強がてら自分で作ってみました。

で、できたのがこちら

jQuery Simple Dialog - Google Code
http://code.google.com/p/jquery-simpledialog/

jQuery Simple Dialog デモ
http://www.mudaimemo.com/p/simpledialog/

名前のとおりjQueryのプラグインです(1.3.x推奨)

必要なものはzipで固めてありますので、ダウンロードしてお使い下さい。

Javascriptファイルは3種類用意してあります。(通常、min、pack)
もちろんどれかひとつだけ読み込めばOK!


特長

  • 超軽量 (約4k!)
  • すでにDOMツリーに含まれている要素をダイアログ表示可能
  • 画像も
  • Ajax (リンクとフォームからリクエスト送信可)

2009年7月5日日曜日

Google Code Prettifyを使ってブログに書くコードをハイライト表示してみる

今更感たっぷりですがGoogle謹製のライブラリを投入!

google-code-prettify
http://code.google.com/p/google-code-prettify/

利用方法等はこちらのREADMEを参照。


準備

1. 配布物一式をダウンロードする。

2. JavascriptとCSSのファイルをしかるべき場所にアップロードしてインクルードする。

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>


3. documentのbodyタグに onload="prettyPrint()" と追加する。

4. スタイルシートを編集して好みの色を指定する。


使い方

ブログにコードを書く場合は、<pre class="prettyprint">...</pre> もしくは <code class="prettyprint">...</code> の中に書きます。
そうすると自動的にコードがハイライト表示されます。