SyntaxHighlighter 導入の余談

Posted by
ぴろり
Posted at
2011/12/03 14:34
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
電算室 カテゴリ

 ソースコードを行番号付きで表示できるよう SyntaxHighlighter を導入しました。SyntaxHighlighter 自体について何かというわけでもなく、導入中に気づいた点や起こった事柄の覚書。

このエントリーをはてなブックマークに追加  

  1. SyntaxHighlighter を導入後、コピー&ペーストで期待した通りに動作するかテストをしていた。Google Chrome、Internet Exproler、Mozilla Firefox ともに、追加で表示されるようになった行番号はコピーされず、コード部分だけがコピーされており、期待した動作になっている。
  2. ところが、Mozilla Firefox だけで全ての行が改行されずにコピーされてしまうという現象が発生。
  3. ローカル ファイル*1で試して見ると、正しく改行付きでコピーされている。
  4. ローカルで正しく動作した上記のファイルを公開サーバに置いて閲覧すると同じ現象が発生する。
  5. ちゃんと ASCII モードで転送したか? とか、改行コードは正しいか? とかチェックしても問題なし。
  6. 3 時間くらい悶絶。
  7. ふと、li 要素の行番号をコピーしないようにする Greasemonkey スクリプトが有効になっていることに気が付く。
  8. スクリプトを停止すると改行付きで正しくコピーできる ← 今ココ

 Greasemonkey スクリプトの動作許可 URL が http* だったため、ローカル ファイルが正しく動作しているように見えたのは、URL file:///C:/... にマッチしていなくて動作していなかっただけという、ね。

 マジっすかー(;´Д`) このスクリプト自体、他のサイトでコードをコピーする際に、余計な行番号が入らなくなるので重宝していましたが、これでは…あっちを立てればこっちが経たず状態。
 少し調べてみたところ、SyntaxHighlighter が生成する HTML は、コードの 1 行が 1 つの div 要素として生成されていて、ブロック要素としてスタイルが当たっているので、画面上は改行されたように見えます。しかし、HTML コードの上では、全ての div 要素が改行なしに一行に詰め込まれているために、Greasemonkey スクリプトがその HTML の記述の通りに解釈して改行されていない、という感じです。うーん、困った。

このエントリーをはてなブックマークに追加  

  1. *1 テスト用に作成した HTML ファイルをブラウザで直接開いて見ていたんですが…まぁ、これが大きな落とし穴だったんです。

この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:いい感じに行番号付きでソースコードを表示したい

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。