Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻

ソースコードのマークアップについて以前書いたなあ

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻を読んで、ソースコードのマークアップについて何度か記事を書いたことを思い出しました。 hxxk.jp は自分のための備忘録サイトです ! ( 何度も書いてアピール )

それら過去の記事を交えて、 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻の内容について触れてみます。

pre 要素でソースコードをマークアップするなら

以前 CSS を書く前に読んでもらいたいことでも書きましたが、 CSS 2 では、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと示しています。

User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.

Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

そしてそのデフォルトスタイルシートは、デフォルトスタイルシートのサンプルに沿って作られるようになっています。 一般的なパソコンの Web ブラウザにおいて、文書製作者によるスタイルシートやユーザスタイルシートが全く適用されない場合でも、 em 要素の強調部分がイタリックで表示されたり、 strong 要素の強調部分がボールドで表示されたりするのはこのためです。

もっとも、 This appendix is informative, not normative. とあるように、あくまで参考であって必ず守らなければならないものではありません。 例えば初期の携帯電話のように、文字をイタリックやボールドで表示することができない UA ではこれに準拠していないことになりますがそれはさておき。

さて、このデフォルトスタイルシートのサンプルの pre 要素に関する部分だけを抜粋してまとめてみると、次のようになっています。 ( ちなみに、 CSS 2.1 のデフォルトスタイルシートのサンプルでは少し内容が異なっていますが、 white-space や font-family の指定は変わりありません。 )

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    unicode-bidi: embed;
}

@media print {
    pre {
        page-break-inside: avoid;
    }
}

@media speech {
    pre {
        pitch: medium;
        pitch-range: 0;
        stress: 0;
        richness: 80;
    }
}

よって、ソースコードを pre 要素でマークアップするのなら、 white-space: pre; を指定する必要は特にありません。 ( 製作者スタイルシートやユーザスタイルシート内でユニバーサルセレクタを使って * { white-space: normal; } とでもしていれば別ですが。 )

もちろん、指定しても全く問題はありませんが一応「冗長な指定ですよ」ということで。 同様に、 font-family: monospace; とも指定されているので、 font-family プロパティを指定しなくても等幅フォントで表示されることになります。 ( なお、 code 要素もデフォルトスタイルシートは font-family: monospace; と指定されています。 )

pre 要素でマークアップすると、横方向にはみ出る ?

overflow指定なしもすっきりでいいかもしれませんが、横幅が長いコードを貼り付けると全体のレイアウトが崩れる可能性がありますよね と書かれてある部分ですが、以前 pre 要素による整形済文字列をどう扱う ? という記事を書きました。 i d e a * i d e a - Lifehacks by 100SHIKI.COM の……すみません著者情報を見つけられなかったので名前が分かりませんが「 i d e a * i d e a の中の人」は、 overflow プロパティの値に auto を用いるか scroll を、 IEですっきり見えるscrollの方にしますかね ということで決めていますが、 overflow: auto; という指定でも、合わせて width プロパティを指定しておけば IE でもはみ出る部分はスクロールバーを表示してすっきり見せてくれます、ご参考まで。

また、 コピペして使ってもらう という目的に重きを置くなら、 <pre><textarea cols="n1" rows="n2" readonly="readonly">ソースコード</textarea></pre> というマークアップ ( n1 と n2 は任意の数字 ) をすれば、 Ctrl+A によるソースコードのみの選択も可能です。 ( 私は pre 要素内に textarea 要素を配置することはあまり推奨しませんが、 XHTML 1.1 および XHTML Basic 以外の DTD なら、仕様上は配置することが可能です。 )

overflow指定したらCTRL+Aでtextarea内だけ選択できるかと思ったら全然だめでした・・・orz。 と書かれてありますが、おそらく pre 要素にて囲まれたボックスを textarea と混同しているのでしょう。 元来、 textarea 要素でマークアップされた部分は、 Windows の一般的なブラウザではその部分をクリックして Ctrl+A することにより、その部分のみの選択をすることができます。

実体参照をどうするか

皆さんコードを貼り付けるときはきっと単にコピペしているだけだと思うのですが実態参照はどうしているんでしょうね とありますが、私の場合はソースコード部分だけをテキストエディタにコピーして、 $ を &#36; 、 & を &#38; 、 < を &#60; 、 > を &#62; に置換して、記事中の文章にペーストしています。 なお、文字実体参照ではなく数値文字参照にしているのは私の好みです。

ちなみに、 $ は文字参照しなくても構わないのですが、私のように Movable Type を使用している場合は、 Movable Type のテンプレートのソースコードを記述する際に、 Movable Type のテンプレートタグと混同して誤動作してしまわないように文字参照しています。

ちょっとした tips

みなさんの方法も教えてくれるとうれしかったり・・・ごにょごにょ。 ということで、 hxxk.jp で使っているテクニックをご紹介。 ちなみに、「ソースコードをどのようにマークアップするか」という点はソースコードは blockquote でマークアップ ? にて書いていますが、 pre+code 派です。 なお、ソースコードのマークアップに関する議論リンク集というものもありますので、これを見てみるのも良いかもしれません。

さてテクニックの紹介と言っても、過去に書いた記事を紹介するだけですが。 pre 要素でソースコードの説明に詳しく書いていますが、 pre[title]::before という属性セレクタと擬似要素セレクタを組み合わせて、 pre 要素に title 属性を記述している場合のみに、その title 属性の値を ::before 擬似要素で表示するということをやっています。 残念ながら IE ( 7 を含む ) はこれに対応していませんが、「対応していない場合でも問題は無く、対応していればなお便利」という類のものなので、試してみてはいかがでしょうか。

トラックバック送信先

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻

私のサイト hxxk.jp は、 pre+code 派です。 また、合わせて overflow プロパティをどうしているか、文字参照をどうしているか、 title 属性による補足情報の提供方法などを解説してみました。