(ブログ)Exciteブログにソースコードを貼り付ける

<pre>タグ
いろいろ調べてみると<pre><code>でくくるのが一般的見たいですが、Exciteブログは<code>タグが使えません。

そのまま貼り付けるとインデントは無視されるし、<pre>だけだと改行コードがあるところに<br>が勝手に挿入されて、改行だらけになっていたので、当初は
<pre style="display:inline">
でくくっていました。

しかし、これだと1行が長いソースだと切れてしまい、途中から見れません。
<pre style="display:inline; overflow:auto;">で試みましたが、overflow属性はdisplay属性=inlineだとどうやら有効にならないっぽいです。

で、またいろいろ探してるととあるSEの日常さんで、解決法が載ってました。
属性に line-height: 50%; とすることで、display:inlineを使わなくとも、見た目上改行だらけの問題を解決でき、overflow属性も使えそうです。

ということで、マイスキンを作成し(Exciteが用意してるスキン流用して)、CSSに下記の属性を追加しました。

pre{
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
line-height: 50%;
border:dotted 1px #808080;
overflow:auto;
width:95%;
font-size: small;
}


これで横に長いときはスクロールバーが自動的に出てくるようになりました。

ちなみに、font-sizeをしていないと、IEで見ると勝手に小さくされてしまいます(おそらく親要素を引き継いでるからか？)


ソースコードの色づけ(シンタックスハイライト)
あとはシンタックスハイライトですが、 あなたのソースコードを彩る、Syntax Highlighterまとめを見てみるといろんな方法があるようです。
ただJavaScript系はExciteブログ上じゃ無理ということで、変換ツール系を使ってみることにしました。

「GeSHi」というのが70種類近くもの言語に対応してるっぽいので、これにします。
ただ、GeSHiのでもページでは簡単にコピペができないので、GeSHiを使ったWebAPIのテストページであるhttp://lab.koshigoe.jp/geshi_webapi/test/post.htmlを利用させてもらうこととしました。
ここで変換して出来たページのソースをそのままコピペして、ブログに張り付け。
簡単です。


ちなみに、以前は;ソースコード HTML化 コンバーター「唐辛子」を使わしてもらってました。
こちらのほうが落ち着いた感じのハイライトになります。