jQuery Chili 2.0のソースコピーウィンドウを抑制してみる

Javascriptを使ったSyntax highlightjQuery Chiliと言うのがあります。ブログ等で例文のソースコードを予約語別に色分けし、読み易く表示してくれます。ですが、バージョン2.0以降、ソースコードの範囲選択を試みると、使いにくいソースコピーウィンドウがポップアップするようになってしまいました。1つだけならまだしも、2つ3つと際限なくポップアップします。ウィンドウをシングルクリックすれば閉じてくれますが、閲覧者の視界をふいに遮ってしまい迷惑千万。使い慣れた人ならともかく、初めて触れた人は混乱してしまうでしょう。以下では、この厄介なウィンドウを抑制する方法を2つ紹介します。

鬱陶しいChiliの黄色いソースコピーウィンドウ

1つ目は、Chiliに用意されたコンフィグ機能を使ったお手軽な修正。設置するとき、selectionStyleに次のようなスタイルを指定してください。このスタイルがそのままソースコードウィンドウに適用され非表示になります。

<script type="text/javascript"> 
ChiliBook.selectionStyle = [ "display:none;" ].join( ' ' );
</script>

この方法のデメリットは、マウスによる範囲選択が一切機能しなくなってしまうこと。これではソースコードのコピーが出来ません。

そこで2つ目は本体を直に修正する方法。jquery.chili-xx.js(バージョン2.2ならjquery.chili-2.2.js)を開き、ファンクションmakeDish内でenableSelectionHelperが呼び出さないようにコメントアウトします。

//opera and safari select PRE text correctly 
if( $.browser.msie || $.browser.mozilla ) {
//	enableSelectionHelper( el );
}

こちらの方法なら、マウスで範囲選択して好きなようにソースコードをコピー出来ます。もし、Chiliを使うようであれば、この抑制方法を参考にしてください。

Share