アメブロ・preタグとcssで本文中にソースコードをきれいに表示

このブログの中で、時々htmlやcssのコードを記述していますが、少し見栄えが良くなるように表記方法を変更してみました。

どういう事かといえば

以前の記事では
---------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-*']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
----------------------------------------------------------------------

↑こんな風に表示していたのを

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-********-*']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

↑こう変更しました。


最初はエンジニアさんが使っているようなSyntaxHighlighterを利用してみる事も考えたのですが、アメブロに導入するのがかなり大変だったのと、記事更新毎にあまりにも手間がかかりそうだったので断念。


結局、「preタグでソースコードを挟みcssで装飾する」のが一番楽そうだったのでこちらの方法を選択しました。


良さそうなcssのデザインを探し廻り、最終的に参考にしたのはこちらの記事

参考：Layer8
preタグスタイルいろいろ CSS - Layer8 Reference

記事内でコードを折り返したくなかったので、スクロールバーが出現する一番上のcssを使わせてもらいました。

上記の記事そのままですが、アメブロcssに以下を追記

/* ■ Preタグ装飾■ */
pre{
font-family: "Courier New",Courier,monospace;
font-size: 1em;
color: #007000;
background-color: #fafafa;
border: solid 1px #bbbbbb;
line-height: 120%;
margin: 1em 0 0 0;
padding: 0.99em;
overflow-x: auto;
overflow-y: auto;
}

あとは本文中に記述したコード（もちろん実体参照変換した後）の前後を「<pre><code>」と「</code></pre>」で挟めばOK。
※実体参照についてはこちらの記事も

ちなみに
<pre><code>～</code></pre>
とすべきなのか
<pre class=”code”>～</pre>
とした方がいいのか判断がつかなかったのでとりあえず前者にしています。

このあたりになると自分の知識ではさっぱり。
あまりこだわらずに行きましょう。

念の為各種ブラウザでちゃんと表示されるか調査。
やはりIEだけ特殊ですね。
IE6に至ってはもう諦めました。
それ以外はGeckoもChromiumもOperaも大体問題なく表示されます。

・アメブロカスタマイズ目次