2008年12月13日土曜日

Bloggerでソースコード掲載方法

当方プログラマなので、ソースコードをのっけていろいろ話をしたいことがあるんだけど、こういうBlog系サービスだと普通にソースコードコピペしても整形が崩れたり<や>が上手く表示されなかったりといろいろと面倒だった。
Haskellのソースをのっけるのにも随分苦労した。
で、なんかいい方法ないか探してみたらこんなの見つけた
さすがというべきか、「クリボウの Blogger Tips」なわけだが、google-code-prettifyってのと簡単なJavaScriptによるエンティティの実体参照変換の組み合わせでかなり気軽にソースコードをのっけられるようになった。
で、早速やってみたんだけど・・・このデフォルトのCSSだと黒背景に黒文字だったり青文字だったりして読めなくなってしまうコードがorz
そんなわけで、Google Pageshttp://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css からダウンロードしたファイルをアップして、さっきのページで追加したJavaScriptの先頭にあるアドレスをアップ先と差し替えてやる


<style type="text/css">
@import "http://xxxxxxxxx.googlepages.com/prettify.css";
</style>


これで、自分用にカスタマイズしたカラーが使える。
ちなみに↓は今使ってるやつ。黒や青をとりあえず全部白くしてみた。

/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #888; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #888; }
.tag { color: #888; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
.str { color: #060; }
.kwd { color: #666; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #888; }
.tag { color: #666; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}

2 件のコメント:

  1. リンクありがとうございまーす。
    記事が役に立ったようでよかったです。

    返信削除
  2. びっくりしたー まさかクリボウさんからコメントがもらえるとは、ありがとうございます。

    BLOGGERで何か新しいことやろうとして調べるとだいたいクリボウさんのページにたどり着きますw

    返信削除