Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

CSS でコードを行番号付きで表示する

Jul132007
Vote:
http://bizcaz.com/archives/2007/07/13-010706.php
Categories: Tools
Tags: Code2Css, MTPrecode
Social Bookmark

Prev Page: Windows XP と Mac OS X のフォント一覧
Next Page: Pingdom Tools

こんばんわ^^

最近プログラムを書くことにハマってる bzbell です。
PHP や JavaScript でいろいろ勉強してるのですが、みなさんすごいなぁと関心の毎日です (;￣∇￣A

でもね、どうしても好きになれない言語があります。
それは MovableType でも使用されている Perl です。

プラグインは主に Perl で書かれたものがほとんどですが、特に Perl に慣れてる人のコードが読みにくいです（つω-`｡）
なぜかと言うと、Perl って言語は省略された記述が可能だからです。

慣れた人にとっては当然のことなのかもしれませんが、慣れてないわたしにとってはとっつきにくい言語の何ものでもありませんでしたっ!!
あと、Perl で書かれたコードは何だかゴチャゴチャして見難いと思うのはわたしだけかなぁ。

たぶんそういう理由から、自分で書くコードには空白(スペース or タブ)をふんだんに使ってるんだと思います。

慣れれば MovableType の Core なところも、スラスラ理解できちゃうんだろうなと思う今日この頃でございます。

さて、いつもお世話になっている、youmosさんのところで、ソースコードをCSSで見やすくデザインする（Code2Css）という記事が紹介されてました。

ソースコードを、CSS を使って行番号つけて見やすくしてくれるサービスです。
ソースコードも公開れてましたので、いろんな人のコードを参考にしたいので、そのコードを覚え書として(公開元がサイト閉じたら嫌なので)保存しちゃいます (;￣∇￣A

ちなみに、同じようにソースコードを行番号つきで表示するプラグインを、わたしのところでは公開してます。
MTPrecodeプラグイン

一応 MovableType 4 でも表示確認済みです。

PHP でソースコードを行番号つきで表示する

以下のコードはこちらのFree Css Templatesさんのところで公開されているものです。
Code2Css tool: the code

ブランク(Space or Tab)をカウントするコード

function count_blank($line,$c) {
$sp=0;
$char = substr($line, $sp, 1);
while($sp<=(strlen($line)-1) && (true && $c == $char)) $char = substr($line, $sp++, 1);
return $sp;
}

行番号つきで表示するコード

function printCode($code)
{
$tab=array();
if (!is_array($code)) $code = explode("\n", $code);
$count_lines = count($code);
$i = 1;
$tab[0]= "<ol class=\"code\">";
foreach ($code as $line => $code_line) {
$sp = count_blank($code_line,"\t");
if($sp>=8) $sp=3;
if($sp==0) {
$sp = count_blank($code_line," ");
$r2 = "<li class=\"t".$sp."\">";
}
else $r2 = "<li class=\"t".$sp."\"><code>";
$sp!=0 ? $e="</code></li>" : $e="</li>";
$r2 .= stripslashes(htmlentities(trim(($code_line)))).$e;
$r .= $r2;
$tab[$i++] = $r2;
}
$tab[$i+1] = "</ol>";
echo "<ol class=\"code\">".$r.</ol>";
return $tab;
}

スタイルシート

ol { padding:0 0 0 2.5em }
.code {
padding:3px 5px 3px 35px;
border:1px solid #808080;
list-style-type: decimal-leading-zero;
font-family: Courier
}
.code code {
font-family:Monaco,"Courier New",Tahoma;
font-size: 1.2em
}
.code li {
margin:2px 0;
padding:0 5px;
background:#f7f7f5
}
.code li.t1 { padding-left:4ex }
.code li.t2 { padding-left:8ex }
.code li.t3 { padding-left:12ex }
.code li.t4 { padding-left:16ex }
.code li.t5 { padding-left:20ex }
.code li.t6 { padding-left:24ex }
.code li.t7 { padding-left:28ex }
.code li.t8 { padding-left:32ex }

ありがとうございます (m;_ _)mペコ

Related Entries
07/04/15MTPrecodeプラグイン

Edit
Permalink
3 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(3)

#1: Posted by youmos @ July 14, 2007 [REPLY]

ソースコード表示用のCSSデザインはコードハイライトがスタンダードだと思っていましたが、意外と見やすいのはシンプルなデザインだったりしますね。
コードハイライトでも2色程度に抑えると、見やすいのかな？とも思います。

人によって感じ方が異なるので、難しいですが
横スクロールだけはしないようにしつつ、、、と思ってます。

また、良いのを見つけたら紹介します-。-

#2: Posted by bzbell @ July 15, 2007 [REPLY]

>>1 youmos さん

こんにちわ^^

> コードハイライトでも2色程度に抑えると、見やすいのかな？とも思います。

そうですね、わたしもそう思います♪
プログラマさんの中には、エディタでキーワードを多色でハイライトする人もいるんだそうです (￣∇￣)

> 横スクロールだけはしないようにしつつ、、、と思ってます。

改行を生かしたまま折り返したかったので、code 要素に以下を追加してます。

ol li code {
white-space: -moz-pre-wrap; /* Mozilla   */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7   */
white-space: pre-wrap;      /* CSS3      */
word-wrap: break-word;      /* IE 5.5+   */
}

でも、これやると Valid でなくなります (´Д｀；)

Code2Css では white-space: pre を使わずに、padding でスペースを表現してるところが、なるほどって思いました (;￣∇￣A