2009年2月20日金曜日

source code in html

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
copy and pasteで正しく取り扱えて、行表示ができて、たぶんvalidなhtmlにできるものを思いついた。長すぎる識別子はどーにもならない。あとは行番号をpaddingしてindentにずれがあるようにならないことだ。

はーめんどくさ。

追記:
IE8だとline:7とかもcopyされてしまいます。FireFoxだとされません。まあ、もう救いようが無いな。code:beforeを無効化すればいいのでjavascriptでがんばる、もしくはブラウザによって打ち分けるhackを仕掛ければよいでしょう。

追記2:
contentは1つ目にcounterを、2つ目のオプション引数にformatを取れる。formatはlist style typeを指定できる。まあ、当然decimal-leading-zeroを指定すればいい。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title>test</title>
<!-- http://www.w3.org/TR/CSS21/text.html#white-space-prop -->
<style type="text/css">
<!--
body {
    counter-reset: lineno;
}
.codeblock {
    white-space: pre;
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Gecho(FireFox, Mozilla) */
    white-space: -o-pre-wrap; /* opera */
    white-space: -pre-wrap; /* old */
    word-wrap: break-wrap; /* IE5.5 or later + Safari */
    background: red; /* debug color */
    width: 500px; /* narrow space */
}
code:before {
    content: 'line:'counter(lineno)' ';
    counter-increment: lineno;
}


-->
</style>
  </head>
<body>
<pre class="codeblock">
<code>import sys</code>
<code></code>
<code>def foo(x):</code>
<code>    return x+x</code>
<code></code>
<code>print foo(2)</code>
</pre>
続き。
<pre class="codeblock">
<code>def bar(y):</code>
<code>    return y*2</code>
<code></code>
<code>print foo(2), bar(3)</code>
</pre>

<pre class="codeblock">
<code>def thisisveryverylongfunctionname(x):</code>
<code>    return x**2</code>
<code></code>
</pre>
</html>

0 件のコメント: