2007年4月3日

Blogger でも、コードハイライト してみる。by google-code-prettify

もともと、はてなダイアリーを使っていたのだが、見た目の良さや使い勝手から、Blogger に乗り換えた。ただ、はてなダイアリーだとプログラムを載せるときに、しっかりハイライトしてくれるところが、すごく良いんだけど、残念なことに Blogger にそのような機能は無い、、、orz
っで、自分で作ろうかなぁとか思ってたら、すでに Google が、ライブラリ作ってたよ、、、。って事で、この Blogger で使えるか試してみたら使えたので、その手順を公開。

１．google-code-prettify - syntax highlighting of code snippets in a web page から、ソースをダウンロード。
２．Blogger の「ダッシュボード」から、該当ブログの「レイアウト」を選択
３．「ページ要素を追加」で、「HTML/JavaScript」を選択
４．「コンテンツ」にソースをベタ貼り（これでプログラムソースを読み込ませる）
↓↓↓こんな感じ
<script type="text/javascript"><!--

// prettify.js code here!!

// --></script>
<style type="text/css">

/* prettify.css code here!!

</style>
５．次に、「HTML の編集」で、body の onload で、スクリプトを実行させる。
  <body>
  <!-- ↓↓↓ onload で prettyPrint() を実行 -->
  <body onload='prettyPrint()'>
６．ここまでが、準備で実際に利用する時は、
<pre class="prettyprint">
  <!-- ココに自分のプログラムソースを書いて投稿する -->
</pre>
以上。
っで、鰯のブログは、背景が黒なので、黒に合うように、css を編集しました。以下参考までに。あと、css 編集してて知ったのだが、"#080" は、"#008800" って感じに展開されるようになっているらしい。
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #09F; }
.com { color: #800; }
.typ { color: #96F; }
.lit { color: #399; }
.pun { color: #996; }
.pln { color: #CCC; }
.tag { color: #09F; }
.atn { color: #96F; }
.atv { color: #080; }
.dec { color: #96F; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>
【追記】
何故か、、HTML のソースで適用すると、改行が削除されてしまいます、、、orz 原因調査中。。。
【原因 2007/04/03 20:00】
Blogger で投稿する際、改行が br タグに変換されて、pre 内で、HTML をハイライトさせようとした時に、br が google-code-prettify でパース中に削除されてしまっていた。。具体的に削除されている場所までは、わからなかったけど、とりあえず、以下のような感じで対応させてみた。
// fetch the content as a snippet of properly escaped HTML.
// Firefox adds newlines at the end.
var content = PR_getInnerHtml(cs);
content = content.replace(/(?:\r\n?|\n)$/, '');

// do the pretty printing
var newContent = prettyPrintOne(content);
↓↓↓こんな感じに変えてみた、、、
// fetch the content as a snippet of properly escaped HTML.
// Firefox adds newlines at the end.
var content = PR_getInnerHtml(cs);
content = content.replace(/(?:\r\n?|\n)$/, '');
content = content.replace(/<br>/g, "\n");

// do the pretty printing
var newContent = prettyPrintOne(content);
prettify.js line:1442 にあたりに追加した。パースさせる前に、br を改行に変換、、、orz すんません。。。

参考
【ハウツー】
ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを
google-code-prettifyが対応しているソースコードはC、C++、Java、Javascript、Python、Ruby、PHP、 Perl、Bash、Awk、Makefiles、HTML、XML、CSSなど。一方、コメントの慣例のためにSmalltalk、LispやCAML ライクなプログラミング言語のソースコードでは正しく動作しない。厳密にその言語でなくとも、対応しているプログラミング言語と記述方法が似ていれば動作する。
投稿者 時刻:

1 件のコメント:

t1una さんのコメント...

大変参考になりました。
自分もBloggerでやろうとしてscriptどこにおけばいいかなぁ。と悩んでいましたので、助かりました。

2008年12月7日 4:24

コメントを投稿

登録: コメントの投稿 (Atom)