ブログにコードを貼り付ける方法で悩むの巻
September 6, 2006 12:02 PM written by Gen Taguchi

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

---

昨日の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

この記事のトラックバックURL (トラックバックは承認後に公開されます)

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

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

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

buena suerte! | 2006年09月07日 11:31

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

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

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

hamashun.com blog | 2006年09月07日 16:39

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

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

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

NOBODY:PLACE - MUTTER | 2006年09月24日 17:01

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

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

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

西尾泰和のブログ | 2006年10月08日 03:30

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

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

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

WEBデザイン BLOG | 2006年10月21日 13:43

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

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

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

猫鯖の部屋 | 2007年03月04日 12:22

コード貼り付けの適格者

2カラムから3カラムに変更 鳴らない、ソース・タグ と、テンプレートのカスタマイズや、 いわゆる特殊文字(実体参照)、記事入力支援ツール ...

コード貼り付けの適格者

気まぐれ!素人のIT我流メモ、もうITワールドが止まらない!![ベータ版] | 2008年01月07日 23:26

コメント一覧

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

by さよ | 2006年09月06日 13:21

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

by chee | 2006年09月06日 13:29

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

by chee | 2006年09月06日 13:30

×実態参照
○実体参照

by 通りすがり | 2006年09月06日 14:04

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

by is | 2006年09月06日 14:25

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

by とおる | 2006年09月06日 15:10

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

by eligor | 2006年09月06日 22:53

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

by 真琴 | 2006年09月07日 00:26

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

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

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

by スカイ | 2006年09月07日 07:52

dp.SyntaxHighlighter>ぬお,すごい

by linyows | 2006年09月07日 09:50

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.34

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.
Firefox meter