記事中のソースコードのマークアップについて。

最近ソースコード用のCSSやマークアップに関する記事がいくつか上がっていて興味深く読ませて頂きました。
うちでもカスタマイズなどの説明の際にはかならずコード使って説明するのでとても参考になりました。

ブログにコードを貼り付ける方法で悩むの巻 - i d e a * i d e a
Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 - hxxk.jp
pre要素へのスタイル指定 - hail2u.net - Weblog
pre 要素のスタイル定義とマークアップ - 2xup

ただ個人的に大勢の方が推奨されているpre要素＋code要素の記法ではどうCSSを駆使しても読みやすさという点で限界があると思いまして、読みやさすさを求めた他の方法を探してみました。

まずはdp.SyntaxHighlighterというjavascriptを使う手。
これを使えばtextarea要素内にコード(とちょっと)を書くだけで、javascriptが自動調整した上でコードの色などを変えて綺麗に表示させてくれますし、コード部分だけを簡単にコピーできたりもします。
記述も簡単ですし、Yahoo! UI Libraryでも使われているものですね。

あと書くのがかなり煩わしいのですけれども、ol要素＋li要素＋code要素の記法もあります。

aaa
bbb
ccc
ddd
eee

実際書くとこんな感じ。行番号がつくのでこちらも結構読みやすいし説明する時に便利かなと。

li要素1つごとにクラス指定し色換えするか、javascriptで交互に色を変えてやるともっと読みやすくなりますね。
長いコードはやっぱりはみ出ちゃうようなのでダメダメですが。

あと、以前からコードのマークアップについては議論されていたお話のようで、こちらにも参考になるお話が転がっていました。
ソースコードのマークアップに関する議論リンク集 - 徒書
（デッドリンクが多いのが残念です）

コードを貼り付ける際はcode要素をpre要素で囲んで記述するのが正しいのだというのを最近知った人なのですがすこし書いてみました。
いまだにblockquote要素使って、場合によってはoverflow:scroll;使ってるんだけど、そろそろ変えたほうがいいなぁ……

Technorati Tags: Markup, SourceCode, Xhtml, css, javascript, YUI

参考リンク: Javascriptだけで各種プログラム言語コードを色分け表示する方法 - phpspot開発日誌; ソースコードを表示させるのに使うべきHTMLタグは？ - jmblog.jp

buena suerte!