ソースコードをCSSで見やすくデザインする （Code2Css）

プログラムなどのソースコードを解説をする場合に行番号があればわかりやすくなる。CSSデザインで行番号つきのソース表示テクニックがCode2Cssとして紹介されている。テキストから番号つきソース表示に変換するPHPプログラムも説明とともに公開されている。

変換用のプログラムはダウンロード配布されていないが、記事中のコードをcode2css.phpとして保存して利用すれば良い。実際の動作をジェネレータ形式で利用できるので、簡単に利用することも出来る。

ジェネレータの利用方法
code2css tool に変換したいソースコードなどを入力する。コードハイライト機能は無いので、行番号を付与したい文章などでも利用できる。

「Style this code」ボタンを押せば変換結果が表示される。出力される内容は　変換した内容のHTMLコードと必要なCSS記述となる。CSSコードは汎用的なものなので、既存のスタイルシートなどに追加して利用することをお勧めする。

行番号つきのテキスト表示に便利に利用できる。また、各行の先頭のスペース（空白文字）は除去され、変わりにスペースの量に応じたスタイルが適用される。CSSデザインを修正すれば見た目も変更できる。