(ブログ)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化 コンバーター「唐辛子」を使わしてもらってました。
こちらのほうが落ち着いた感じのハイライトになります。
[PR]
by jehoshaphat | 2008-07-09 13:31 | Webがらみ | Trackback | Comments(3)
トラックバックURL : http://jehupc.exblog.jp/tb/8273597
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by jehoshaphat at 2008-07-09 18:52
line-height: 50%;
が必要と書きましたが、何やらなくてもOKっぽそうです。
font-sizeを指定したせいかよく分かりません。
Commented by fureai2005 at 2009-01-29 15:46
初心者でも簡単に作成できる「マイスキン」の作成方法はないでしょうか?
Commented by jehoshaphat at 2009-01-30 00:08
スキンを変えるなら、エキサイト提供のスキンをベースに変更していったほうが無難です。あと、変更時はHTML,CSS(特にCSS)の基礎的知識は必要になるので、全く知らない方にはちょっと敷居が高いかも知れません。
しかし、HTML,CSSは解説サイトも多いので、それらをベースにいろいろ試したらいいと思います。


<< (Linux)knoppixで... (.NET)TextBoxで表... >>