隠居のMT備忘録：ソースコードを縦スクロールつきコード・ボックスで表示する
エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>～</code></pre>という形で記述している。
私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの <pre> は次のように設定されている。backgroundの色は、いじっていているが。
このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、
が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで
なお、、<pre><code> ～ </code></pre> の ～ 部分（ソースコード）にある < > は、特殊文字と判定されるので、< > とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、 に、" が "に、& が &にエンコードされるが、エンコードされたものをそのまま Copy&Paste して使っても問題はない。
また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。
私の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;
,,,,
}
が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで
<pre style="height: 150px">
なお、、<pre><code> ～ </code></pre> の ～ 部分（ソースコード）にある < > は、特殊文字と判定されるので、< > とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、 に、" が "に、& が &にエンコードされるが、エンコードされたものをそのまま Copy&Paste して使っても問題はない。
また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)