3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。(jehupc.exblog.jpから移転中)

(ブログ)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化 コンバーター「唐辛子」を使わしてもらってました。

こちらのほうが落ち着いた感じのハイライトになります。