MS Access Tips/Sample and VBA and Blog customize etc...

SyntaxHighlighter3.0のコードをコピーすると空白が文字化けする

タイトル

SyntaxHighlighter 3.0 はダブルクリックでコードを選択できます。これをコピーしてVBAウィンドウに貼り付けると文字化けするという症状に気が付きました。これは、Chromeだけで発生して、IE(Edge)やFirefox では発生しません。

Chromeユーザーは結構多いので、これは要対策です。

難易度:

原因を探る

コピーしたコードをVBAウィンドウに貼り付けると下の画像のようになります。連続する空白文字が?に、空白行が、Printに文字化けしてます。

VBAウィンドウの文字化け

調べてみると、VBAだけでなく、他でも文字化けして、正常に動作しない場合もあるらしい。下記では、Blogger で症状が発生している(FC2ブログでは発生しない)。

SyntaxHighlighter で装飾したコードを Chrome でコピーすると文字化けする - Dr.ウーパのコンピュータ備忘録

Uncode対応のエディター(今回は mery)で文字コードを確認してみると、0x00A0 になっている。通常の半角空白の文字コードは 0x0020 ですのでこれが原因でしょう。Uncode対応のエディターでみると、この2つは見た目上は区別がつかないです。

これが何かは下記を参照。

ノーブレークスペース - Wikipedia

SyntaxHighlighterは連続する半角空白をノーブレークスペースに変換しているのが原因のようです。

対策

原因が分かれば、対策は自ずと決まります。
ノーブレークスペースは、HTMLの文字参照では &nbsp または、  または   で表現されますので、本体の shCore.jsファイルを検索してみました。しかし、どれもヒットしません。

そこで、SyntaxHighlighterをダウンロードして展開してできるsrcフォルダー内に圧縮前のソースがあるので、その shCore.js を調べてみると、下記のようなコードがヒットしました。

ここで、空白を' 'に変換すると規定しているようです。 そこで、HTML上に、下記のように規定値を変更するコードを追加します。

1行めが今回追加したコードです。半角空白を ' '(半角空白)に変換するという意味です。これだと、元の圧縮コードを変更する必要はありません。

2行目、は下記で導入した時にテキストエリアをハイライト対象にするために設定したコードです。必要に応じて記述してください。

SyntaxHighlighter 3.0 を導入する -hatena chips

結果、Chrome でも文字化けすることなくコピーできるようになりました。

SyntaxHighlighter の css では、

と指定しているので、半角空白のままでも表示上、レイアウトが崩れることもないです。

まとめ

この症状は、本体のコードをいじることなく、jsコードを1行追加するだけで解決できますので、コピーで思わぬ不具合が発生しないように対策しておくといいでしょう。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/486-c17186bf
該当の記事は見つかりませんでした。