Top > HP作成> 隠居のMT備忘録:ソースコードを縦スクロールつきコード・ボックスで表示する

2010年1月30日

隠居のMT備忘録:ソースコードを縦スクロールつきコード・ボックスで表示する

 エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>~</code></pre>という形で記述している。
 私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの <pre> は次のように設定されている。backgroundの色は、いじっていているが。
pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

 このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
 これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、
pre {
  ,,,,
  height: 150px;
  ,,,,
 }
 
といれればよいことが分かった。 
 が、これでは1行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで
<pre style="height: 150px"> 
とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

 なお、、<pre><code> ~ </code></pre> の ~ 部分(ソースコード)にある < > は、特殊文字と判定されるので、&lt; &gt;  とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、&nbsp; に、" が &quot;に、& が &amp;にエンコードされるが、エンコードされたものをそのまま Copy&Paste して使っても問題はない。
 また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1971

トラックバック

» カストマイズの履歴 from Atelier
 このページでは 2006年の1月から私のHomePageに手を入れた事柄につい... 続きを読む

» 縦横スクロールバーの設定 from Movable Type 技術情報

テーマ採択後色々見ていると奥が深く分からないことだらけである。
コードを1行の形式を崩さないで表示しょうとすると横スクロールがどうしても必...

続きを読む

» 縦横スクロールバーの設定 from 写風 Weblog (Movable Type 技術情報)

テーマ採択後色々見ていると奥が深く分からないことだらけである。
コードを1行の形式を崩さないで表示しょうとすると横スクロールがどうしても必...

続きを読む

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)