ブログ ページ内にソース コードを表示する簡単で軽量な方法。

私も今までSo-net ブログ内にプログラムのソース コードやスクリプト、設定ファイルの記述、コマンド等を簡単に表示させたくて色々な方法を試しました。
ソースを整形済みテキストとして表示する " <pre> " タグを使用した場合、文字の大きさと文字列の長さ、ページの横幅によってはページ外にはみ出してしまい、読めなくなってしまいます。
そこで以前は次のようにしてコードを表示させておりました。

[以前の方法]

<ol class="codelist"> <li class="tab0 even"><code>xxxxxxxx</code></li> <li class="tab1 odd"><code>xxxx xxxx</code></li> <li class="tab0 even"><code> xxxxxxxx</code></li> <li class="tab1 odd"><code>xxxxxxxx</code></li> </ol>

" xxxxxxxx " の部分に実際のコードを書きます。

[以前の方法の実際の表示]

1. xxxxxxxx
2. xxxx xxxx
3. xxxxxxxx
4. xxxxxxxx

しかしこの方法では記述に手間が掛かり過ぎ、HTML ソースも見辛くなってしまいます。
その上、インデントやスペースが正しく反映されません
また、コマンド リストに於いては行番号は無い方が良いと思いました。
そして、長い文字列を折り返さずにスクロールさせたいと思いました。

ブログの品質に拘る方は " syntaxhighlighter " や " Highlight.js " 等を使用していることでしょう。

私はもっと簡潔に、簡素な方法を探しました。
そして次のブログで紹介されている方法を採用することに致しました。

"sgryjp" 様のブログ "sgryjp.log" の記事 "ブログのソースコード記載段落だけ横スクロール可能に@iPhoneブラウザ" のURL:
http://sgry.jp/blog/2013/03/17/762/

[今回の表示方法]
まず、下準備を致します。
自分のSo-net ブログの " 管理ページ " から " デザイン " タブを開き、 " テンプレート管理 " を選択し、使用しているテンプレートの " 編集 " を選択します。
" スタイルシート編集 " 画面でCSSの最後に次のコードを追加致しました。

/* Code Block */ div.codeblock { overflow-x: auto; border: solid 1px #888888; background-color: #dddddd } div.codeblock > table { border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; } div.codeblock > table td { border: none; margin: 0; padding: 0; } div.codeblock > table td pre { border: none; margin: 0; padding: 0; }

これでブログ内にコードを表示させるスタイル設定が出来たので、実際にコードを表示させる際には次の様にして記述致します。

<div class="codeblock"><table><tr><td><pre> <code>xxxxxxxx xxxx xxxx xxxxxxxx xxxxxxxx</code> </pre></td></tr></table></div>

[今回の方法の実際の表示]

xxxxxxxx xxxx xxxx xxxxxxxx xxxxxxxx

灰色の背景と黒枠の中にコードが表示されております。
インデントとスペースが正しく反映されております。
行番号はございません。

また、文字列が長い際には自動的にスクロール ボックスが表れて横スクロールが出来ます。

[文字列が長い場合の記述例]

<div class="codeblock"><table><tr><td><pre> <code>xxxxxxxx aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz xxxxxxxx</code> </pre></td></tr></table></div>

[文字列が長い場合の実際の表示]

xxxxxxxx aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb aaaaaaaa bbbbbbbb yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz yyyyyyyy zzzzzzzz xxxxxxxx

タグ：HTML ブログ so-net CSS スタイル シート ソース コード 表示 スクロール インデント スペース 改行 簡単