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

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

そのまま貼り付けるとインデントは無視されるし、
だけだと改行コードがあるところに
が勝手に挿入されて、改行だらけになっていたので、当初は

でくくっていました。

しかし、これだと1行が長いソースだと切れてしまい、途中から見れません。
で試みましたが、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化 コンバーター「唐辛子」を使わしてもらってました。
こちらのほうが落ち着いた感じのハイライトになります。