ブログにコードを貼り付ける方法で悩むの巻

今回もちょっと技術寄りなので興味のない方はスルーの方向で。

—

昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。

まずは実例。自分がよく読むところでいくと・・・。

(1) id:naoyaさんの場合

で、コードをみると<pre>で囲ってあって、「>」みたいなやつは実態参照してあって、preのスタイル指定でフォントをCourier Newにしている模様。これは等幅つうことですな。

(2) miyagawaさんの場合

こちらは見た目的にはtextareaっぽくなっていますね。スタイルは<pre class=”hatena-super-pre”>とのこと。ちょっとCSSを覗いてみると”overflow:scroll”で制御しているようですね。なるほど、つか、overflowって知らんかった・・・（汗）。フォントは同様にCourier Newですね。

(3) いやなブログさんの場合

こちらは見た目はmiyagawaさんのに似ていますが、縦スクロールが必要な場合が多いですね。2行のコードだとちょっと見づらい感じ（IEの場合）。ちょっとスタイルシートを覗いてみると”overflow:auto”の点がmiyagawaさんと違う模様。あと”white-space:pre”という記述も発見。空白の扱い方ですが、これも指定しておくとよさげですね。

(4) 最速インターフェース研究会さんの場合

こちらも<pre class=”code”>で制御している模様。”overflow:scroll”の指定あり。

(5) hail2u.netさんの場合

こちらは<pre>と<code>で囲んでありますね・・・。

さて、以上からちょっと考えてみます。まず「なぜコードを貼るか」の目的から。読者のことを考えるときっと(1) 読んで理解してもらう、(2) コピペして使ってもらう、の二通りでしょう。その目的を踏まえたうえで以下を考えてみます。

■ 絶対やったほうが良さげなもの

これはやっといた方がいいかも、をあげてみます。

• コードはやっぱり等幅フォントじゃないと。Courier Newが良さそう。
• “white-space:pre”もなんか指定しておいた方が良さそう。
• コード内部の背景色はタイトルヘッダー部分の色と同色系だと良さそう。

■ ちょっと悩みどころなもの

いろいろな人のブログを見てちょっと悩んでいるところ。

(a) overflowの指定

overflowの指定はそもそもしないか、scrollか、autoの三通りですね。overflow指定なしもすっきりでいいかもしれませんが、横幅が長いコードを貼り付けると全体のレイアウトが崩れる可能性がありますよね・・・そうなるとoverflow指定しておいて、IEですっきり見えるscrollの方にしますかね・・・。

なお、コピペのやりやすさについてはどちらも同じようなものですね。overflow指定したらCTRL+Aでtextarea内だけ選択できるかと思ったら全然だめでした・・・orz。

(b) classの指定

<pre>自体にスタイルをつけるか、<pre class=”code”>にするか、<pre><code>にするか、はたまた<code>にするか・・・悩みどころですが、個人的には<pre class=”code”>がすっきりかな、と思うのでそうします。

ここはまぁ、読者のことを考えるとどうでもいいところなので（と言い切るのは横暴なような気もしますが）個人の好みで。

(c) 実体参照について

皆さんコードを貼り付けるときはきっと単にコピペしているだけだと思うのですが実体参照はどうしているんでしょうね・・・「>」とかきちんと打ち直しているのかな・・・それとも実体参照変換ツールを使っているのか・・・。

ひょっとしてMovabletypeが自動変換してくれる？と思って実験してみましたがうまくやってくれない・・・。とりあえず変換ツールを使うことにしましょう。

以上、ちょっと調べてここまで書いてみましたが、なんだかとっても初心者ちっくなことを書いているようでなんだか恥ずかしい気がしないでもないですね・・・うーむ、今度αギークな面々にあったときに聞いてみよ。

というわけで完成系。idea*ideaにスタイルシート仕込んでみました。check*padのコードの一部を貼り付けてみました。

function ms_add (ttl, pjt_id) {
if (ttl != '') {
$('ms_name').value = '';
var dif = document.body.offsetHeight;
var url = 'index.php';
var pars = 'mode=ms&act=add&ajax=1&pjt_id='+pjt_id+'&ttl='+encodeURIComponent(ttl);
new Ajax.Updater ('ms_box_notyet', url, { method: 'post', parameters: pars, onComplete: function() { new Effect.Highlight('ms_notyet_' + $('new_id_value').innerHTML); window.scrollBy(0,document.body.offsetHeight-dif); $('ms_name').focus();} });
} else {
return false;
}
}

ど、どうっすかね？みなさんの方法も教えてくれるとうれしかったり・・・ごにょごにょ。

しかしこれでコード貼り付けるのが楽になりました・・・めざせ技術者！ｗ

ツイッターもやっています！