beautyOfCodeを導入してみた。
beautyOfCode: jQuery Plugin for Syntax Highlighting « Struggles by Lars C.
SyntaxHighlighter - Dynamic Brush Loading
WordPressを使っているblogとかでよく見かけるソースコードを見やすく表示する機構beautyOfCodeを導入してみました。この分野の超定番と思われるSyntaxHighlighterさんをjQueryから呼び出しすっきりと再デザインする優れものであります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/site_media/js/2.0/beautyofcode/jquery.beautyOfCode-min.js"></script>
<pre class="code">
<code class="python">
def func(spam, ham):
eggs = spam + ham
return eggs
</code>
</pre>
と呼び出したり記述したりしておいて、ページを読み込んだ後に実行するように、
$(function(){
$.beautyOfCode.init('clipboard.swf');
});
とかやるとOKの模様であります。
一旦ロードして実行した後にajaxなどで内容を変更した場合は、
$.beautyOfCode.beautifyAll();
だけを実行するといい感じですよ。
リンク先の公式では両方を一度に実行するという記述があるのですけど、このページの感じだとSafariとかでエラーが発生してしまいました。しかし、ちゃんとレイアウトをやり直してくれるのでいいかなぁと。あと、Firefoxでは処理のタイミングが悪いのかエラーが発生して有効にならない場合があります、記事個別表示ページを新規に呼び出したりすると。でもまぁ、これも見た目が悪いだけで実害は無いのでまぁいいかなぁと。
この辺りちょいと調べてみたいのですけど、使っているSyntaxHighlighterさんが古くてClipboardへのCopyにFlashを使っていたりもするので、新しいSyntaxHighlighterをそのまま普通に使うのも良いかなぁと思ったりもしてます。
設置する前にデモページや本体のソースを眺めていて気が付いたのですけど、その肝心のSyntaxHighlighterさんが含まれていないんですよね、一緒に配布されていない。でも、デモページは動く。なんじゃーこりゃーと思ったら、SyntaxHighlighterのご本家様がアップロード領域に恵まれない人の為に各バージョン毎に無料でホスティングしてる!
凄い。太っ腹。かっちょえー。こういうの凄く愛だと思いますよ、自分が作ったモノへの。
このページではjQueryをキャッシュ効果も考えてGoogleさんがホスティングして下さっているのを使っているので、このままSyntaxHighlighterもホスティング経由で使わせて頂こうかとも思ったけれども、アップロード領域には恵まれているので自前領域に置いてそこから使う事にしましたよ。私が使うわずかな転送料でもお金だし、ちりも積もれば山となりますから申し訳ない、申し訳なくてたまらない。これ以上ご厄介にはなれないっす。
SyntaxHighlighter - Please donate to keep development active!
PayPalさん経由での寄付も受け付けているので宜しければ。私も僅かばかりになりますが寄付しまっす!