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

SPONSORED LINK

Pocket

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

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

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

(1) id:naoyaさんの場合

code_naoya.gif

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

(2) miyagawaさんの場合

code_miyagawa.gif

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

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

code_0xcc.gif

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

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

code_lamala.gif

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

(5) hail2u.netさんの場合

code_hail2u.gif

こちらは<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;
}
}

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

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

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

SPONSORED LINK

    • さよ
    • September 6th, 2006

    code は、コードを示す要素なので、
    <pre><code>
    とした方が、より良いのではないでしょうか。

    • chee
    • September 6th, 2006

    ソースコードを示す<code>を入れて、classで指定しない手もありそうです。
    <code>はデフォルトで等幅フォントになります。
    <pre><code>

    • chee
    • September 6th, 2006

    すみません、他のページ見ている間におもいっきりかぶりました(^^;。

    • 通りすがり
    • September 6th, 2006

    ×実態参照
    ○実体参照

    • is
    • September 6th, 2006

    僕の場合、実体参照はエディタで変換してますね…
    僕は一種類ずつ(<>”くらいを)いちいち一括変換してますが、
    マクロとかあれば簡単なんじゃないしょうか。

    • とおる
    • September 6th, 2006

    naoyaさんもmiyagawaさんもスーパーPRE記法が自動的に変換してるんじゃないでしょうか?
    cf. http://blog.bulknews.net/mt/archives/002052.html

    • eligor
    • September 6th, 2006

    Ctrl + a で、コードだけ選択したいってときは、やっぱり〈textarea〉なんですよね….。

  1. http://hxxk.jp/2006/09/06/2210 からトラックバックを送りましたが、 HTTP error: 403 Throttled ( spam によって受信可能な ping の最大値を超えてしまった状態)になってしまったので、コメント欄でお知らせさせていただきます。

  2. はじめまして、私は<textarea></textarea>タグでくくってしまいます。
    dp.SyntaxHighlighterというJavascriptで<ol></ol>タグに変換されます。
    Javascript無効の場合は、<textarea></textarea>タグ表示になります。

    CSSで表示を切り替えています。CSSが無効の場合でも<ol></ol>タグで行番号も表示されますので、読み手にはいいかも。結構使えとおもいます。

    クラス指定でコードの種類によっても表示を切り替えることが可能です。
    dp.SyntaxHighlighter
    http://www.dreamprojections.com/syntaxhighlighter/?ref=about

    • linyows
    • September 7th, 2006

    dp.SyntaxHighlighter>ぬお,すごい

  3. 記事中のソースコードのマークアップについて。

    最近ソースコード用のCSSやマークアップに関する記事がいくつか上がっていて興味深く読ませて頂きました。
    うちでもカスタマイズなどの説明の際にはかならずコ…

  4. Blogにコードを貼り付ける時。

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

  5. CODEとAAを入力するCSSのまとめ。

    『等幅フォント』に関する意識がテキトーだったわけだが。 このエントリを読んで、ち…

  6. ブログにコードを貼り付ける方法.js alpha0.2(Firefox only)

    ブログにコードを貼り付ける方法.js alpha0.1の続編。コード中の&lt…

  7. dp.SyntaxHighlighter-コード表示に役立つJavaScript

    ブログなどでソースコードを公開する際に役立つJavascript-dp.SyntaxHighlighterの紹介です。各プログラムコードで特定要素のカラー…

  8. 個人的なメモ:ソースを表示するのによさそうなスタイルシートについて

    最近ちょくちょくとCSSを弄ったり適当な内容の記事を作ったりしているため コマン…

  9. コード貼り付けの適格者

    2カラムから3カラムに変更
    鳴らない、ソース・タグ

    と、テンプレートのカスタマイズや、
    いわゆる特殊文字(実体参照)、記事入力支援ツール

  1. No trackbacks yet.