Movable Type 備忘録
CSS でコードを行番号付きで表示する
- Next Page: Pingdom Tools
- Prev Page: Yahoo! Site Explorer / Badge
こんばんわ^^
最近プログラムを書くことにハマってる 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ペコ
Trackback Pings(0)
No trackbacks found.
Comments(2)
- #2: Posted by bzbell [RES]
>>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
ソースコード表示用のCSSデザインはコードハイライトがスタンダードだと思っていましたが、意外と見やすいのはシンプルなデザインだったりしますね。
コードハイライトでも2色程度に抑えると、見やすいのかな？とも思います。
人によって感じ方が異なるので、難しいですが
横スクロールだけはしないようにしつつ、、、と思ってます。
また、良いのを見つけたら紹介します-。-