So-net無料ブログ作成
検索選択
ブログのページ内にソース コードを掲載する方法 ブログトップ

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

私も今まで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



ブログのページ内にソース コードを掲載する方法 ブログトップ